Page needs to be imported

<script language="javascript" src="Https://webapi.amap.com/maps?v=1.4.15&key= gold key&plugin = Map3D, AMap. DistrictSearch, AMap. DistrictLayer"></script>
Copy the code

Add content to the chainWebpack of Module. exports of vue.config.js

chainWebpack: config= > {
    config.externals({ AMap: 'AMap' }); // Introduce amap
    config.resolve.alias
        .set(The '@', resolve('src')) // set('@@', resolve(' SRC /components'))
        .set('_c', resolve('src/views/components'))},Copy the code

This can be done directly where AMap needs to be introduced

import AMap from 'AMap';
Copy the code

If your project needs to continue to access other functions without being able to connect to the Internet. This can be done in the packaged app.js filee.exports=AMapInstead of

try{
    e.exports=AMap
}catch{}Copy the code

You need to install Echarts and echarts-extension-AMap

npm i echarts echarts-extension-amap --save
Copy the code

Introduced in the main. Js

require('echarts-extension-amap');
import 'echarts-extension-amap';// Alternatively, using import will generate an error after packaging
Copy the code

Refer to an echarts document on air quality in major Chinese cities – Baidu Map

Importing corresponding Components

import * as echarts from 'echarts';
import AMap from 'AMap';
Copy the code

Customize the hover box content of a scatter

tooltip : {
    trigger: 'item'.formatter({seriesName, data}) {
        let item = data.value[2];
        return `${seriesName}<br />${item.channelName} ${item.businessId}`}},Copy the code

After the map is instantiated, if you want to call map-related methods, you can limit the display scope of the map by referring to the following operations

this.dom = echarts.init(this.$refs.container);
this.dom.setOption(option);// Initialize the map

var amapComponent = this.dom.getModel().getComponent('amap');
var amap = amapComponent.getAMap();
amap.setLimitBounds(amap.getBounds());// Limit the map display range
Copy the code

If the scatter on the map changes frequently in echart content, you can use the echarts.setoption method to change only the corresponding option, so that you do not need to re-instantiate amAP every time.

Set animation: False in series to stop the scatter from swaying when dragging the map. Set symbol: ‘image://’+onLinePic. OnLinePic is a base64 encoded string.

Amap related Settings

amap: {
    resizeEnable: true.// Whether to monitor map container size changes
    center: [121.487919.31.266058].// Initializes the map center point
    disableSocket: true.dragEnable: true.// Drag and pan
    rotateEnable: false./ / rotation
    viewMode: '3D'.showLabel: true.labelzIndex: 130.pitch: 0.// Tilt Angle
    features: ['bg'.'point'].// Set the elements displayed on the map
    zoom: 9.48.// Initialize the map hierarchy
    zooms: [9.15].// Limit the zoom level
},
Copy the code

Amap API