Autonavi JS API summary

Introduction to the

This is the recent use of Amap JS API to do a summary, about each class can achieve what effect, and how to use. After that, the optimization ideas and solutions of some common problems will be summarized.

This blog address – https://encaik.gitee.io/blog/amap.html

Amap API is introduced in Vue

• NPM package introduced

npm i amap-js -S
Copy the code

Advantages: Out of the box, easy to use

• Script Introduction

Add a link to index.html, followed by the requested key.

<script
  type="text/javascript"
  src="Https://webapi.amap.com/maps?v=1.4.15&key= [key]." "
></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
Copy the code

Configure the global name in vue.config.js, which can be called directly from the vue instance in code.

module.exports = {
  configureWebpack: {
    externals: {
      AMap: "AMap".AMapUI: "AMapUI"}}; }Copy the code

Advantages: High degree of customization, you can combine functions as required.

Basic concepts of Amap

The map

Map is the bearer of Amap API, all APIS need to be received by a map, the same interface can have multiple maps.

<! - map -- -- >
<div id="container" style="width: 100%; height: 100%"></div>
Copy the code

this.map = new this.AMap.Map("container", {
  resizeEnable: true.// Whether to monitor map container size changes
  zoom: 15.// Initialize the map hierarchy
  zooms: [5.18].// Map allows scaling levels
  center: [117.96.40.96].// Initializes the map center point
  mapStyle: "amap://styles/407154d906b9cd83d4e5e57df8b27cec" // Customize the map publishing style
});
Copy the code

The layer

Layers are layers covered on the map, and each layer has a different function. There is a hierarchical relationship between layers.

• The official layer

/ / satellite
let satellite = new AMap.TileLayer.Satellite();
/ / network
let road = new AMap.TileLayer.RoadNet();
this.map.setLayers([satellite, road]);
Copy the code

• Self-built layer

let imageLayer = new AMap.ImageLayer({
  url:
    "http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg".bounds: new AMap.Bounds([116.327911.39.939229], [116.342659.39.946275])});Copy the code

• WMS/WMTS

var wms = new AMap.TileLayer.WMTS({
  url:
    "https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/".blend: false.tileSize: 256.params: {
    Layer: "0".Version: "1.0.0".Format: "image/png".TileMatrixSet: "EPSG:3857"}});Copy the code

mulch

Coverings are vector shapes or ICONS drawn on a map.

• Marker class

Dot marks, ICONS can be customized.

• The Text class

Text annotation, you can add custom style text.

• Polyline class

Broken line

• Polygon class

polygon

• BezierCurve class

Bessel curve

• Circle the class

circular

• OverlayGroup class

OverlayGroup is the overlay management class. You can use this class to batch manage the display and hide of the overlay and other operations.

Information form

The info form is an HTML node that appears on the interface based on the map location offset.

this.infoWindow = new this.AMap.InfoWindow({
  isCustom: true.autoMove: true.closeWhenClickMap: true.anchor: "top-left".content: document.getElementById("infoWindow"),
  offset: new this.AMap.Pixel(22.22)});Copy the code

The map controls

Map controls are officially packaged components used to control map operations.

this.map.plugin(["AMap.ControlBar"].() = > {
  let controlBar = new AMap.ControlBar(Options);
  this.map.addControl(controlBar);
});
Copy the code

tool

Event listeners

Use the on(eventName, Handler, Context) and off(eventName, Handler, Context) methods to listen for maps and map elements.

EventName: eventName (mandatory)

Handler: Event callback function (required)

Context: The context in the event callback (optional, by default, this in handler is the object calling on, otherwise this refers to the object referenced by context)

Note: In multiple bindings, the eventName, handler function object, and Context object will be bound again if any of them are different.