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

页面须要引入javascript

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德key&plugin=Map3D,AMap.DistrictSearch,AMap.DistrictLayer"></script>
复制代码

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

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的地方能够直接vue

import AMap from 'AMap';
复制代码

若是你的项目，须要在不能连外网的状况下，继续访问其余功能。能够在打包以后的app.js文件中，把e.exports=AMap改成java

try{
    e.exports=AMap
}catch{
    
}
复制代码

须要安装echarts和echarts-extension-amapweb

npm i echarts echarts-extension-amap --save
复制代码

main.js里引入apache

require('echarts-extension-amap');
import 'echarts-extension-amap';//或者，用import在打包以后会报错，目前还没发现缘由
复制代码

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

对应组件引入api

import * as echarts from 'echarts';
import AMap from 'AMap';
复制代码

自定义散点的悬浮框内容markdown

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

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

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: [121.487919, 31.266058],//初始化地图中心点
    disableSocket: true,
    dragEnable: true, // 拖拽平移
    rotateEnable: false, // 旋转
    viewMode: '3D',
    showLabel: true,
    labelzIndex: 130,
    pitch: 0, // 倾斜角度
    features: ['bg','point'],//设置地图上显示的要素
    zoom: 9.48, //初始化地图层级
    zooms: [9, 15],//限制缩放等级
},
复制代码

高德地图api