Some configurations of the AMap API for the first time (VUE + Autonavi JSAPI)

The official website provides relevant configuration. Here I provide my own configuration for reference only

The website address

1. Register an account and apply for a Key

See official documentation

2 Configure the key and security key

I use method 2 — “key with static security key set in plaintext” and “use Loader as NPM”

HTML version of official website:

Add script script

// Add proxy server setup script tag (must be before loading loader.js)<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'Your requested security Key',}</script>/ / load the loader. Js<script src="https://webapi.amap.com/loader.js"></script>
Copy the code

Install the loader

npm i @amap/amap-jsapi-loader --save
Copy the code

Using the loader

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "".// The obtained Web developer Key is required when the load is invoked for the first time
    "version": "2.0".// Specify the version of JSAPI to load, which is 1.4.15 by default
    "plugins": [].// List of plug-ins to use, such as Scale' amap.scale 'etc
}).then((AMap) = >{
    map = new AMap.Map('container');
}).catch(e= > {
    console.log(e);
})
Copy the code

Vue version:

In the SRC folder, create the utils folder. In the utils folder, create the ode

/* JSAPI key with static security key set in plaintext (insecure, recommended only in development environment) */
import AMapLoader from '@amap/amap-jsapi-loader';

const securityJsCode = 'xxxxxxxx'; // The security key you requested
const key = 'xxxxxxxx'; // The obtained Web developer Key is required when the load is invoked for the first time
const version = '2.0'; // Specify the version of JSAPI to load, which is 1.4.15 by default
const adress = 'https://webapi.amap.com/loader.js'; // Proxy server address

window._AMapSecurityConfig = {
  securityJsCode // The security key you requested
};

/** * Load map *@param {*} Plugins map configuration items *@returns promise* /
const mapLoader = plugins= >
  AMapLoader.load({
    key, // The obtained Web developer Key is required when the load is invoked for the first time
    version, // Specify the version of JSAPI to load, which is 1.4.15 by default
    plugins // List of plug-ins to use, such as Scale' amap.scale 'etc
  });

// Dynamically create script tags to import proxy servers
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = adress;
document.body.appendChild(script);

// Export the function used to load the map
export default mapLoader;

Copy the code

Since amaploader.load is a promise, we split the then and catch parts of it out

3. Get a map container

Official HTML version:

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

#container {width:300px; height: 180px; } 
Copy the code

Vue version:

Create a new component mymap.vue and mount it in app.vue

<template> <div :class="$style.root"> <! <div :class="$style.container" id="container" :style="{width: width + 'px', height: Height + 'px'}"></div> </div> </template> <script> export default {data() {return {width: 1000, // 600, // map height}; }, <style lang="scss" module> .root { width: 1920px; height: 1080px; } </style>Copy the code

4. Create a Map (and show it)

Official HTML version:

var map = new AMap.Map('container', {
    resizeEnable: true.// Whether to monitor map container size changes
    zoom:11.// Initialize the map hierarchy
    center: [116.397428.39.90923] // Initializes the map center point
});
Copy the code

Vue version:

Add data containers to data

data() {
  return {
    AMap: null.map: null.width: 1000.// Map width
    height: 600.// Map height
    plugins: [
      'AMap.Scale' /* Scale */.'AMap.ToolBar' /* Toolbar */.'AMap.Marker' / * marked * /.'AMap.Geolocation' / * location * /.'AMap.MapType' /* Layer switch */].// Map plugin
    config: {
      resizeEnable: true.// Map initializes to the current city (will be overwritten by Center)
      // center: [], // Map center point
      zoom: 10.// Set the zoom level of the map
      mapStyle: 'amap://styles/normal' // Set the display style of the map
    } // Map configuration items
  };
},
Copy the code

CreateMap provides a method to initialize the map

// Initialize the map
async createMap() {
  try {
    // Make the map independent (to prevent the need for multiple maps), privatize an AMap in the current component
    this.AMap = await mapLoader(this.plugins);
    
    // The then part of the promise
    this.map = new AMap.Map('container'.this.config);
  } catch (e) {
    // Catch part of the promise
    console.log(e); }},Copy the code

AsnycLoaderPlugins provide methods to load multiple plug-ins asynchronously at the same time

// Asynchronously load multiple plug-ins simultaneously
asnycLoaderPlugins(AMap, map, plugins) {
  AMap.plugin(plugins, function () {
    map.addControl(new AMap.Scale()); // add scale
    map.addControl(new AMap.ToolBar()); // Add a toolbar
    map.addControl(new AMap.MapType()); // Add layer toggles
    // map.add(
    // new AMap.Marker({
    // position: map.getCenter(),
    // content: '
        
         1
        
    / /})
    / /); // Add tags
    // High precision positioning
    highAccuracyGeolocation(AMap, map);
    // Add a circular overlay
    // map.add(
    // new AMap.Circle({
    // center: map.getCenter(), // center position
    // radius: 1000, // circle radius
    // fillColor: 'red', // circle fillColor
    // strokeColor: '# FFF ', // strokeColor
    // strokeWeight: 2 // stroke width
    / /})
    // );
  });
Copy the code

Export the highAccuracyGeolocation method in a separate JS file

High precision positioning is usually used during initialization because by default only the current location is located
The browser must have location permission enabled
Chrome may not be able to use high precision positioning, which is available with Firefox
See cause of official Geolocation location failure
The main reason why the function is imported in js file is that the callback function has this pointing problem
High-precision positioning is plug-in loading and is called in the asnycLoaderPlugins method

/** ** high precision positioning *@param {*} AMap
 * @param {*} map* /
const highAccuracyGeolocation = (AMap, map) = > {
  // After initialization, locate to local (high precision positioning, Chrome will fail, Firefox can succeed)
  var geolocation = new AMap.Geolocation({
    // Whether to use high precision positioning. Default: true
    enableHighAccuracy: true.// Set the locating timeout period. The default value is 5s
    timeout: 10000.// The offset of the location button's docking position, default: Pixel(10, 20)
    buttonOffset: new AMap.Pixel(10.20),
    // After successful positioning, adjust the map view range to make the positioning position and accuracy range visible in the view. Default: false
    zoomToAccuracy: true.// Locate the position of the button, RB represents the lower right
    buttonPosition: 'RB'
  });

  map.addControl(geolocation);
  geolocation.getCurrentPosition();
  geolocation.on('complete', onComplete);
  geolocation.on('error', onError);

  function onComplete(data) {
    // Data is specific location information
    console.log(data);
  }

  function onError(data) {
    // Location error
    console.log(data); }};export default highAccuracyGeolocation;

Copy the code

5. Use MouseTool to draw a circle and find the area

Note that these plug-ins are available on the official website, see distance, length, area
I’m just trying to provide a method here

Hold down the left mouse button drag animation circle, release the left button to complete the drawing circle, right mouse button to clear the drawing circle

/** * Draw circles to get information *@param {*} AMap
 * @param {*} map* /
function getMessageByDrawCircle(AMap, map) {
  map.plugin('AMap.MouseTool'.() = > {
    // Add the MouseTool plugin to the map
    const mouseTool = new AMap.MouseTool(map);

    // Use the mouse tool to draw a circle
    mouseTool.circle();

    // Add events
    mouseTool.on('draw'.function (e) {
      // console.log(e.obj);
      if(e.obj.getRadius()===0) return
      console.log('Radius of the circle' + e.obj.getRadius()); // Get the radius
      console.log('Area of a circle' +e.obj.getArea()); // Get the area
      console.log('Latitude of the center of the circle' +e.obj.getCenter().getLat()); // Get the latitude of the center point
      console.log('Longitude of the center of a circle' +e.obj.getCenter().getLng()); // Get the longitude of the center point
    });
    const container = document.getElementById('container');
    container.oncontextmenu = function (e) {
      // Right click the code to execute
      mouseTool.close(true);
      getMessageByDrawCircle(AMap, map)
      return false; // Block the browser's default popover behavior
    };
  });
}

export default getMessageByDrawCircle;

Copy the code

6. Complete code for the component

<template> <div :class="$style.root"> <! <div :class="$style.container" id="container" :style="{width: width + 'px', height: height + 'px' }"></div> </div> </template> <script> import mapLoader from '@/utils/gaode'; import highAccuracyGeolocation from '@/utils/highAccuracyGeolocation'; import getMessageByDrawCircle from '@/utils/getMessageByDrawCircle'; export default { mounted() { this.createMap(); }, data() {return {AMap: null, map: null, width: 1000, // map width: 600, // map height: 600, [' AMap. Scale Scale / * * /, 'AMap. The ToolBar / * * / ToolBar,' AMap. Marker tags * / / * and 'AMap. Geolocation / * * /, 'MapType' /* Layer switch */], // map plugin config: {resizeEnable: true, // map initialization location to the current city (will be covered by center) // Center: [], // map center point zoom: 10, // set map zoom level mapStyle: 'amap://styles/normal' // set map display style} // map configuration item}; }, methods: {// initialize map async createMap() {try {this.amap = await mapLoader(this.plugins); this.map = new AMap.Map('container', this.config); AsnycLoaderPlugins (this.amap, this.map, this.plugins); getMessageByDrawCircle(this.AMap, this.map); } catch (e) { console.log(e); }}, // async plugins (AMap, map, plugins) {amap.plugins (AMap, map, plugins) { function () { map.addControl(new AMap.Scale()); // Add scale map.addControl(new amap.toolbar ()); // Add toolbar map.addControl(new map.mapType ()); Map.add (// new map.marker ({// position: map.getCenter(), // content: '< div style = "fontSize: 16 px" > 1 < / div >' content / / / / custom some markers covering}) / /); // Add markup // highAccuracyGeolocation(AMap, map); Add (// new amap.circle ({// center: map.getCenter(), // center: map.getCenter(), // radius: 1000, // Circle radius: 1000, // Circle radius: 1000, // Circle radius: 1000, // fillColor: Circular fill color 'red', / / / / strokeColor: '# FFF, / / / / strokeWeight stroke color: 2 / / / / / / stroke width})); }); }}}; </script> <style lang="scss" module> .root { width: 1920px; height: 1080px; } </style>Copy the code

Some configurations of the AMap API for the first time (VUE + Autonavi JSAPI)