1. Register an account

-Gode open website: https://lbs.amap.com/dev/id/choose

2. Create an application

The account subject may have different application projects, such as you want to develop DD travel, C exercise, big Z comments, etc. Each project is divided into different usage scenarios such as applet, APP, PC terminal, etc. Each scenario has a key, this key is a bit like ID, password, etc., when used to access the map, you can know which application and interface access the map.

Create an app

add key

• After the creation is successful, the account subject and the project have both, and the key is not yet. Click Add to create a key to provide authentication when accessing. The name of the key is best related to the application scenario, which is convenient for later management.

After application

3. Create a Gaode map

• On the home page, you can see that there are a variety of development support platforms. Click to see the API documentation for different application scenarios.

• It can be introduced in script, JS can be loaded asynchronously in vue, and asynchronously loaded after mounted is loaded,
• Here is a demonstration of vue, the key is the value just applied
• Note: 1.window appears in ssr/nuxt only after mounted, so it cannot be written in created
• 2.doc needs to complete document

<script>
export default {
  mounted() {
    //   After the page is loaded, start the asynchronous introduction of the Gaode map
    //Created a callback function, which will be called after the Gaode map is loaded
    window.onLoad = function () {
      // All the logic about the map must be written in this callback
      // Make sure the Gaode map is loaded
      var map = new AMap.Map("container");
    };
    // key is the value of the application
    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;
    //The API file is introduced into the page, and the function will be called after loading
    document.head.appendChild(jsapi);
  },
};
</script>

Finally, just add a line of code to the page

• The container in the construction parameter is the id of the map container added in the preparation phase:

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

• The above has been implemented, but it is not displayed because there is no width and height. Just give the width and height.

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

Effect

4. Simple configuration

• At the same time, you can set the center point, level, display mode, custom style and other attributes for the map:
• Add an object after the container
• zoom: zoom level
• center: Specify the array to set the center point in the form of latitude and longitude, the default is the current position
• viewMode:3D view

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

Five, point mark

• There are many types of tags in the official documentation, here is a demonstration point tag

• Create a Marker instance in the callback function, add latitude, longitude and title, you can comment separately to see the effect, if they appear together, the parts will be mutually exclusive

   // Create a Marker instance:
      var marker = new AMap.Marker({
        //position: new AMap.LngLat(116.39, 39.9), // latitude and longitude object, or a one-dimensional array of latitude and longitude [116.39, 39.9]
        position: [113.3245904, 23.1066805], // Geographic latitude and longitude
        title: "Guangzhou Tower", // What to display when the mouse is over
        offset: new AMap.Pixel(-100, -100), // Offset
        // You can specify the icon image address
        icon: "//vdata.amap.com/icons/b18/1/2.png", // Add Icon icon URL
        // The content displayed by the marker can be customized, allowing the insertion of html strings
        content: "<h1>Guangzhou Tower Content</h1>",
      });
      // Add the created point marker to an existing map instance:
      map.add(marker);

Effect

Six, the use of plug-ins

• There are many functions in Gaode, but not each one comes with it but we need to introduce it ourselves. Here is an example of a navigation bar
• The plug-in is still written in the callback function, and the plug-in is introduced as needed through the AMap.plugin method. The first parameter is the plug-in name, and the second is to use the plug-in function after the plugin callback.

 // Add the plugin, the first parameter is the plugin name, the second is the callback function
      AMap.plugin("AMap.ToolBar", function () {
        //Load plugins asynchronously
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });

Effect

Seven, complete code reference

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

<script>
export default {
  mounted() {
    //   After the page is loaded, start the asynchronous introduction of the Gaode map
    //Created a callback function, which will be called after the Gaode map is loaded
    window.onLoad = function () {
      // All the logic about the map must be written in this callback
      // Make sure the Gaode map is loaded
      var map = new AMap.Map("container", {
        zoom: 20, //level
        center: [113.3245904, 23.1066805], //Center point coordinates
        viewMode: "3D", //Use the 3D view
      });

      // Create a Marker instance:
      var marker = new AMap.Marker({
        //position: new AMap.LngLat(116.39, 39.9), // latitude and longitude object, or a one-dimensional array of latitude and longitude [116.39, 39.9]
        position: [113.3245904, 23.1066805], // Geographic latitude and longitude
        title: "Guangzhou Tower", // What to display when the mouse is over
        offset: new AMap.Pixel(-100, -100), // Offset
        // You can specify the icon image address
        icon: "//vdata.amap.com/icons/b18/1/2.png", // Add Icon icon URL
        // The content displayed by the marker can be customized, allowing the insertion of html strings
        content: "<h1>Guangzhou Tower Content</h1>",
      });

      // Add the plugin, the first parameter is the plugin name, the second is the callback function
      AMap.plugin("AMap.ToolBar", function () {
        //Load plugins asynchronously
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
      // Add the created point marker to an existing map instance:
      map.add(marker);
    };
    // key is the value of the application
    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;
    //The API file is introduced into the page, and the function will be called after loading
    document.head.appendChild(jsapi);
  },
};
</script>

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