Extension for Baidu Map 百度地图扩展
根据要求
index.html 里插入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your ak" ></script> <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.7.0/extension/bmap.js"></script>
所需的View 页面代码如下
<template>
<div id="bar_dv" style="width: 500px; height: 500px"> </div>
</template>
<script>
export default {
name: "map",
data(){
return{
myChart: null,
}
},
mounted(){
this.showChart()
},
beforeDestroy() { //销毁实例
if(!this.myChart){ //解决报错:cannot read property 'dispose' of null
return;
}
this.myChart.dispose()
this.myChart = null
},
methods:{
showChart(){
this.myChart = echarts.init(document.getElementById("bar_dv")); //初始化echarts实例,id名称对应template中的id名称
var option = {
// 加载 bmap 组件
bmap: {
// 百度地图中心经纬度
center: [120.13066322374, 30.240018034923],
// 百度地图缩放
zoom: 14,
// 是否开启拖拽缩放,可以只设置 'scale' 或者 'move'
roam: true,
// 百度地图的自定义样式,见 http://developer.baidu.com/map/jsdevelop-11.htm
mapStyle: {}
},
series: [{
type: 'scatter',
// 使用百度地图坐标系
coordinateSystem: 'bmap',
// 数据格式跟在 geo 坐标系上一样,每一项都是 [经度,纬度,数值大小,其它维度...]
data: [ [120, 30, 1] ]
}]
}
this.myChart.setOption(option)
var bmap = this.myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}
}
}
</script>
[点击并拖拽以移动]
效果如图