安装:
npm安装:
- 百度地图API官网申请key,在index.html中引入百度地图:
<script src="http://api.map.baidu.com/api?v=3.0&ak=申请的key"></script>
- 在webpack的配置文件中设置外部扩展:
如果是Vue-cli2,在build/webpack.base.conf.js中加入以下代码:
如果是Vue-cli3,在vue.config.js中加入以下代码:module.exports = { ...... //externals属性:防止将某些import的包package打包到bundle中,而是在runtime运行时再去从外部获取这些external dependencies扩展依赖 externals:{ 'BMap': 'BMap', 'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT' } }
module.exports = { ...... configureWebpack:{ externals:{ 'BMap': 'BMap', 'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT' } } }
- npm安装echarts:
npm install echarts --save
- 如果是在全局引入:在main.js中加入以下代码:
如果是在单个模块中引入:import echarts from 'echarts' //之后可以通过this.echarts来使用 Vue.prototype.echarts = echarts Vue.use(echarts )
import echarts from 'echarts' //之后可以直接通过echarts来使用
- 在需要的组件中引入:
//安装的是echarts完整包,里面包含百度地图扩展,路径为 echarts/extension/bmap/bmap.js,将其引入 //ECharts的百度地图扩展,可以在百度地图上展现点图,线图,热力图等可视化 require('echarts/extension/bmap/bmap')
CDN安装:
- 百度地图API官网申请key,在index.html中引入百度地图、Echarts和Echarts的百度地图扩展:
<script src="http://api.map.baidu.com/api?v=3.0&ak=申请的key"></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>
- 在webpack的配置文件中设置外部扩展:
如果是Vue-cli2,在build/webpack.base.conf.js中加入以下代码:
如果是Vue-cli3,在vue.config.js中加入以下代码:module.exports = { ...... externals:{ 'BMap': 'BMap', 'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT', 'echarts':'echarts' //之后可以在组件中直接使用echarts } }
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 );