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

安装：

npm安装：

1. 百度地图API官网申请key，在index.html中引入百度地图：

2. 在webpack的配置文件中设置外部扩展：
   如果是Vue-cli2，在build/webpack.base.conf.js中加入以下代码：

   module.exports = {
   	......
   	//externals属性：防止将某些import的包package打包到bundle中，而是在runtime运行时再去从外部获取这些external dependencies扩展依赖
   	externals:{
   	    'BMap': 'BMap',
   	    'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
   	 }
   }
   

   如果是Vue-cli3，在vue.config.js中加入以下代码：

   module.exports = {
   	......
   	configureWebpack:{
   		externals:{
   	   	   'BMap': 'BMap',
   	   	   'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
   	    }
   	}
   }
   

3. npm安装echarts：npm install echarts --save
4. 如果是在全局引入：在main.js中加入以下代码：

   import echarts from 'echarts' //之后可以通过this.echarts来使用
   Vue.prototype.echarts = echarts 
   Vue.use(echarts )
   

   如果是在单个模块中引入：

   import echarts from 'echarts' //之后可以直接通过echarts来使用
   

5. 在需要的组件中引入：

   //安装的是echarts完整包，里面包含百度地图扩展，路径为 echarts/extension/bmap/bmap.js，将其引入
   //ECharts的百度地图扩展，可以在百度地图上展现点图，线图，热力图等可视化
   require('echarts/extension/bmap/bmap')
   

CDN安装：

1. 百度地图API官网申请key，在index.html中引入百度地图、Echarts和Echarts的百度地图扩展：

2. 在webpack的配置文件中设置外部扩展：
   如果是Vue-cli2，在build/webpack.base.conf.js中加入以下代码：

   module.exports = {
   	......
   	externals:{
   	    'BMap': 'BMap',
   	    'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT',
   	     'echarts':'echarts'  //之后可以在组件中直接使用echarts
   	 }
   }
   

   如果是Vue-cli3，在vue.config.js中加入以下代码：

   module.exports = {
   	......
   	configureWebpack:{
   		externals:{
   	   	   'BMap': 'BMap',
   	   	   'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT',
   	   	    'echarts':'echarts'
   	    }
   	}
   }
   

使用：

初始化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 );