前端vue下使用echarts显示中国地图的坑

先説需求:要想把设备在全国的分布在地图上画出来,以zoom in/out鼠标缩放

相信很多网友都在找china.js 劝你别找了。
那个不能鼠标缩放,

现在我以在jeecg-boot项目(前端vue)来实验的,

  1. 先看效果

数据点造了2个:
[{"name":"合肥","value":[120.99,36.99]},{"name":"大庆","value":[120.01,36.01]}]
(地名随便起的,勿对号入座)

  1. 去百度地图开发者平台去申请一个key

现在开发者平台统一了,无论是APP,还是WEB,都是在一个地方申请。
去里面建一个应用,它会给你生成一个key

  1. 声明引用百度地图

jeecg-boot有框架,在建一个map.js中我们添加如下代码

export function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
        if (typeof BMap !== 'undefined') {
            resolve(BMap)
            return true
        }
        window.onBMapCallback = function() {
            resolve(BMap)
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
            'http://api.map.baidu.com/api?v=2.0&ak='+ ak +'&__ec_v__=20190126&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}
  1. 业务模块vue

代码如下,注意几点
1)刚一进界面,可以延时再调入数据及刷新地图
具体招数: .nextTick() 或 setTimeout()
2)动态刷新数据方法
没找到什么好方法,只以重新init,重新加载option
为了避免提示重复创建对象,用
if (this.chart != null && this.chart != '' && this.chart != undefined) {
this.chart.dispose()
}
判断一下




 


结束。点个赞再走呗。感谢啦。

你可能感兴趣的:(前端vue下使用echarts显示中国地图的坑)