vue中eharts集合高德地图amap采坑记录

页面需要引入

<script language="javascript" src="xxxxxx?v=1.4.15&key=高德key&plugin=Map3D,AMap.DistrictSearch,AMap.DistrictLayer"></script>

在vue.config.js的module.exports的chainWebpack中加入内容

chainWebpack: config => {
    config.externals({ AMap: 'AMap' }); // 引入高德地图
    config.resolve.alias
        .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
        .set('_c', resolve('src/views/components'))
},

这样在需要引入AMap的地方可以直接

import AMap from 'AMap';

如果你的项目，需要在不能连外网的情况下，继续访问其他功能。可以在打包之后的app.js文件中，把e.exports=AMap改为

try{
    e.exports=AMap
}catch{
    
}

需要安装echarts和echarts-extension-amap

npm i echarts echarts-extension-amap --save

main.js里引入

require('echarts-extension-amap');
import 'echarts-extension-amap';//或者，用import在打包之后会报错，目前还没发现原因

参考echarts的一篇文档全国主要城市空气质量-百度地图

对应组件引入

import * as echarts from 'echarts';
import AMap from 'AMap';

自定义散点的悬浮框内容

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

地图实例化之后，想要再调用地图的相关方法，可以参考下列操作，限制地图的显示范围

this.dom = echarts.init(this.$refs.container);
this.dom.setOption(option);//初始化地图

var amapComponent = this.dom.getModel().getComponent('amap');
var amap = amapComponent.getAMap();
amap.setLimitBounds(amap.getBounds());//限制住地图的显示范围

如果echart内容中，地图上的散点变化频率很高，可以用echarts.setOption方法，只改变对应的option，这样就不用每回重新实例化amap了。

series中设置animation: false,可以在拖动地图时，散点不在晃动。设置symbol: 'image://'+onLinePic,onLinePic为一个base64编码的字符串，可用图片设置散点。

amap的相关设置

amap: {
    resizeEnable: true,//是否监控地图容器尺寸变化
    center: [11, 111],//初始化地图中心点
    disableSocket: true,
    dragEnable: true, // 拖拽平移
    rotateEnable: false, // 旋转
    viewMode: '3D',
    showLabel: true,
    labelzIndex: 130,
    pitch: 0, // 倾斜角度
    features: ['bg','point'],//设置地图上显示的要素
    zoom: 9.48, //初始化地图层级
    zooms: [9, 15],//限制缩放等级
},

高德地图api