First, register an account

– gold open url: lbs.amap.com/dev/id/choo…

2. Create an application

Account subject may have different application projects, such as travel, C fuck you want to develop the DD, big Z reviews, etc., each project and small programs, inside the APP, PC and so on the different usage scenarios, each scene has a key, this key is a little like ID, password, can know which application to access the map, interface to access the map.

Create an

Add the key

After successfully creating the account, you have the account body and project.keyNot yet, add CreatekeyTo provide identity authentication during access.keyThe name should be related to the application scenario to facilitate later management

After the application is completed

3. Create amap

You can see a variety of development support platforms on the home page, click in to see different application scenariosAPIThe document

Can be found inscriptIntroduction,vueCan be loaded asynchronouslyJSIn themountedAsynchronous loading after loading,

This demonstrationvue.keyIs the value just applied for

1. Create window is created when SSR/NUxt is mounted

2. Doc needs to complete document

<script>
export default {
  mounted() {
    // When the page is loaded, start asynchronously importing Amap
    // Create a callback function that will be called when Amap is loaded
    window.onLoad = function () {
      // All logic about the map should be written in this callback
      // Make sure amap is loaded
      var map = new AMap.Map("container");
    };
    // key is the requested value
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=16a302b5bbfb4ecd11a3738d9e6b3552&callback=onLoad";
    Create a script DOM element
    // doc needs to complete document
    var jsapi = document.createElement("script");
    // Set the script tag attribute
    jsapi.charset = "utf-8";
    jsapi.src = url;
    // Import the API file into the page, and call the function after loading
    document.head.appendChild(jsapi); }}; </script>Copy the code

Finally, just add a line of code to the page

In the construction parameterscontainerId of the map container added for the preparation phase:

<template>
  <div id="container"></div>
</template>
Copy the code

The above has been implemented, but because there is no width and height, so it is not displayed, just give the width and height

<style lang="less" scoped>
#container {
  width: 600px;
  height: 400px;
}
</style>
Copy the code

The effect

4. Simple configuration

You can set center point, level, display mode, custom style and other attributes for the map at the same time:

Add an object after the Container

zoom: Zoom level

center: Specifies that the array is centered in latitude and longitude, the default being the current position

viewMode: 3 d view

   var map = new AMap.Map("container", {
        zoom: 20./ / level
        center: [113.3245904.23.1066805].// Center point coordinates
        viewMode: "3D".// Use 3D view
      });
Copy the code

Five, dot marking

There are many types of tags in official documents

Created in the callback functionMarkerExample, add latitude and longitude and title, can be commented separately to see the effect, if the parts appear together will be mutually exclusive

   // Create a Marker instance:
      var marker = new AMap.Marker({
        //position: new amap.lnglat (116.39, 39.9), // Latitude and longitude objects can also be a 1d array of latitude and longitude [116.39, 39.9]
        position: [113.3245904.23.1066805].// Latitude and longitude of geographical location
        title: Canton Tower.// What is displayed when the mouse moves up
        offset: new AMap.Pixel(-100, -100), / / the offset
        // You can specify the icon image address
        icon: "//vdata.amap.com/icons/b18/1/2.png".// Add the Icon URL
        // You can customize what markup points display, allowing the insertion of HTML strings
        content: " Content});// Add the created dot mark to the existing map instance:
      map.add(marker);
Copy the code

The effect

Six, the use of plug-ins

There are a lot of features in Autonavi, but not all of them come with us and we need to introduce them ourselves. Here is an example of a navigation bar

The plugin is still written in the callback function, throughAMap.pluginMethod to import the plug-in on demand, the first parameter is the plug-in name, the second parameter is inpluginUse the plug-in functionality after the callback.

 // Add a plug-in. The first parameter is the plug-in name and the second is the callback function
      AMap.plugin("AMap.ToolBar".function () {
        // Load the plug-in asynchronously
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
Copy the code

The effect

Vii. Complete code reference

<template>
  <div id="container"></div>
</template>

<script>
export default {
  mounted() {
    // When the page is loaded, start asynchronously importing Amap
    // Create a callback function that will be called when Amap is loaded
    window.onLoad = function () {
      // All logic about the map should be written in this callback
      // Make sure amap is loaded
      var map = new AMap.Map("container", {
        zoom: 20./ / level
        center: [113.3245904.23.1066805].// Center point coordinates
        viewMode: "3D".// Use 3D view
      });

      // Create a Marker instance:
      var marker = new AMap.Marker({
        //position: new amap.lnglat (116.39, 39.9), // Latitude and longitude objects can also be a 1d array of latitude and longitude [116.39, 39.9]
        position: [113.3245904.23.1066805].// Latitude and longitude of geographical location
        title: Canton Tower.// What is displayed when the mouse moves up
        offset: new AMap.Pixel(-100, -100), / / the offset
        // You can specify the icon image address
        icon: "//vdata.amap.com/icons/b18/1/2.png".// Add the Icon URL
        // You can customize what markup points display, allowing the insertion of HTML strings
        content: " Content});// Add a plug-in. The first parameter is the plug-in name and the second is the callback function
      AMap.plugin("AMap.ToolBar".function () {
        // Load the plug-in asynchronously
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
      // Add the created dot mark to the existing map instance:
      map.add(marker);
    };
    // key is the requested value
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=16a302b5bbfb4ecd11a3738d9e6b3552&callback=onLoad";
    Create a script DOM element
    // doc needs to complete document
    var jsapi = document.createElement("script");
    // Set the script tag attribute
    jsapi.charset = "utf-8";
    jsapi.src = url;
    // Import the API file into the page, and call the function after loading
    document.head.appendChild(jsapi); }};</script>

.<style lang="less" scoped>
#container {
  width: 600px;
  height: 400px;
}
</style>
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Use of AMap API in VUE

First, register an account

2. Create an application

Create an

Add the key

3. Create amap

Finally, just add a line of code to the page

The effect

4. Simple configuration

Five, dot marking

Content

The effect

Six, the use of plug-ins

The effect

Vii. Complete code reference

Content

Use of AMap API in VUE

First, register an account

2. Create an application

Create an

Add the key

3. Create amap

Finally, just add a line of code to the page

The effect

4. Simple configuration

Five, dot marking

Content

The effect

Six, the use of plug-ins

The effect

Vii. Complete code reference

Content

Related Posts

Uni-App development tools

Build a Redux wheel

【React+Typescript】React.FC = react.typescript