vue-cli项目中使用echarts和echarts的百度地图扩展bmap

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---