版本说明: vue:2.6+,iview:3.4+, vuex:3.0+,
1、echarts的引入:npm install --save , vue页面中:import echarts from 'echarts';
2、百度地图的引入:首先在百度地图API官网申请key,然后在index.html中引入:
接着在vue.config.js中的module.exports={}中添加一下代码,若不添加会出问题,BMap is undefined:
configureWebpack: { externals: { "BMap": "BMap", }, },
最后在使用百度地图的vue文件中引入:import BMap from 'BMap'; (可有可无) require('echarts/extension/bmap/bmap');(必须有)。
3、初始化echarts
html:(class="bdMap"设置地图的宽高,没有宽高地图不显示)
<div class="bdMap" id="bdMap"></div>
ts: const mapDom = document.getElementById('bdMap') as HTMLCanvasElement; let myMap; if (mapDom) { myMap = echarts.init(mapDom); } let option = { bmap: { roam: true, // 用户是否可以拖拽和缩放地图 opt: { enableMapClick: false, }, mapStyle: { // 设置地图的样式 styleJson: [ { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "railway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "subway", "elementType": "labels.icon", "stylers": { "visibility": "off" } } ] }, }, series: [], }; myMap.setOption(option, true);
4、在地图上画区域
let bmap = myMap.getModel().getComponent('bmap').getBMap(); // 获取bmap的实例
bmap.centerAndZoom(new BMap.Point(121.482249, 31.223212), 15); // 设置地图初始化时的中心点及缩放级别
let polygon = new BMap.Polygon(point, {strokeWeight: 2, strokeColor: '#ff0000'}); // 建立多边形覆盖物
bmap.addOverlay(polygon); // 画区域时 如果座标点是多个数组 则遍历数组并将polygon一一添加到map中
注:如果在每次进入地图的时候,需要重新绘制区域【比如地图需要根据选择的内容不同展示不同的区域】
let overlayList = bmap.getOverlays(); // 获取到地图上所有覆盖物
for (let lay = 0, layLen = overlayList.length; lay < layLen; lay++) { // 遍历这些覆盖物并根据条件移除覆盖物
if (overlayList[lay].zo) { // 判断这些覆盖物是polygon区域 也可以判断Label(content且content不为'shadow')、Marker(Bc) 【可根据自己爱好选择判断条件】
bmap.removeOverlay(overlay[lay]); // 清除符合条件的覆盖物,不建议将所有的覆盖物一起清除,因为会将地图默认的覆盖物清除,其他的功能会受影响
}
}
不建议直接使用clearOverlay() , 因为将所有的覆盖物清除,可能会影响地图的层级关系,在拖拽的时候报错,尽管可以正常使用。
5、给地图添加点击功能,对Marker点击需要弹出对应的信息,因此需要区分点击的是地图还是Marker。点击事件e.overlay是null的时候,点击的是地图;点击事件e.overlay是undefined的时候,点击的是Marker。
以上是最近遇到过的问题及使用过的功能。