vue+echarts+bmap绘制散点图
基于echarts的中国地图散点图在上篇博客中已经写过了,这篇博客主要写一下基于扩展的百度地图为地图绘制的方法1.在main.js注册echarts2.在页面引入bmap.jsimport 'echarts/extension/bmap/bmap.js'3.单纯的引入bmap,浏览器会报错 BMap is not defined,参考了很多博客,发现需要单独写一个js文件,进行异步操作,...
·
基于echarts的中国地图散点图在上篇博客中已经写过了,这篇博客主要写一下基于扩展的百度地图为地图绘制的方法
1.在main.js注册echarts
2.在页面引入bmap.js
import 'echarts/extension/bmap/bmap.js'
3.单纯的引入bmap,浏览器会报错 BMap is not defined,参考了很多博客,发现需要单独写一个js文件,进行异步操作,
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
然后在所需的页面引入
import {MP} from './baidu-map.js'
4.在mounted里面执行
this.$nextTick(() => {
let _this = this
MP(你申请的百度ak).then(BMap => {
document.getElementById('myChart').style.height = window.screen.availHeight * 0.9 + 'px'
this.$nextTick(() => {
this.drawLine()
})
window.addEventListener('resize', () => {
this.$echarts.init(document.getElementById('myChart')).resize()
})
})
})
5.前期准备工作完成之后,绘制散点图就与上一篇博客类似了,只需把option.geo换成
bmap: {
// 百度地图中心经纬度
center: [119.222119, 36.717958],
// 百度地图缩放
zoom: 14,
// 是否开启拖拽缩放,可以只设置 'scale' 或者 'move'
roam: true,
min: 12,
max: 18
},
把依赖的坐标系改为bmap
coordinateSystem: 'bmap',
更多推荐
已为社区贡献3条内容
所有评论(0)