本文主要是介绍vue-cli项目中使用echarts和echarts的百度地图扩展bmap，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
安装echarts：
npm install echarts --save
在main.js中引入echarts：
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)
安装百度地图：
百度地图API官网申请key;
在Index.html中引入：
在build/webpack.base.conf.js中的module.exports={}中加入以下代码：
externals:{
'BMap': 'BMap',
'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
}
使用：
在需要的组件中引入：
import BMap from 'BMap'
require('echarts/extension/bmap/bmap')
初始化echarts和bmap：
var _this = this;
_this.echartsModel = this.echarts.init(document.getElementById('echartsMap'))
_this.echartsModel.setOption({
bmap: {
roam: true, // 用户是否可以拖放和缩放地图
opt: {
enableMapClick: false, //禁止地图底图的点击事件
}
},
animation: false,//关闭动画效果，这样在地图上覆盖散点图或者热力图的时候，拖动将不会有比较长时间的延迟
series: [],
});
// 添加百度地图插件bmp，获得地图对象，获取到的百度地图对象适用于所有的百度地图的接口。
_this.mapModel = _this.echartsModel.getModel().getComponent('bmap').getBMap();
//设置地图的中心点和缩放级别
_this.mapModel.centerAndZoom(new BMap.Point(_this.centerLng,_this.centerLat),_this.zoom);
事件绑定和解绑：
methods：{
echartsEvent:function(){},
mapEvent:function(){}
}
//给echarts添加事件/解除事件
echartsModel.on('click',echartsEvent）；
echartsModel.off('click',echartsEvent）;
//给地图添加事件/解除事件
mapModel.addEventListener("click",mapEvent );
mapModel.removeEventListener("click",mapEvent );
这篇关于vue-cli项目中使用echarts和echarts的百度地图扩展bmap的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
