1、初始化echarts以及例子可以看管网的

地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon

2说下我遇到的问题:

1、按照官方的例子写下来的,但是地图就是出不来
2、除了官方例子中的元素外,还需要给百度地图添加中心点、定位等等,但是不知道怎么获取百度地图实例
3、获取到百度地图实例后设置百度地图的元素不生效

(1)、引入百度地图AK

在项目的文件夹中(看具体项目在哪里新建都行)新建一个js文件,文件内容如下:

 //百度地图ak注册脚本
 export const 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 + '&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}

然后在.vue文件的script标签中用import loadBMap form …引入,在mounted()中:

 loadBMap("你的ak值")
	   	.then(() => {
	   /*在这里初始化你的echart,也就是let chartDom = document.getElementById('baidu-map');
            let myChart = echarts.init(chartDom);...那一大串*/
		}).catch((err)=>{
            console.log(err);
        });

这样就注册了百度地图了(当然你也可以在created周期函数中尝试下,我这边没有尝试过,不过我想应该是可以的,这里没有涉及操作dom,我这里是为了方便初始化echarts所以写在mounted里面)

(2)、获取百度地图实例

在初始化echarts的方法中,在以下位置获取百度地图实例(在echarts初始化后获取)

option && myChart.setOption(option);
//获取百度地图实例,这一行代码放在初始化echart的那个js里面的最后也就是上面loadBMap的then中,我这里是写成了一个方法
this.baiduMapObj = myChart.getModel().getComponent('bmap').getBMap();

(3)、设置百度地图

**
//必须要添加定时器,而且延迟的值必须要有,如果为0是不行的,亲测
setTimeout(()=>{
	//这个定时器要放在获取到上面的this.baiduMapObj之后执行,这里的baiduMap就是this.baiduMapObj
      const point = new BMap.Point(109.5878,34.115);
       baiduMap.centerAndZoom(point, 1);
       baiduMap.addControl(new BMap.NavigationControl(
           {
               type : BMAP_NAVIGATION_CONTROL_ZOOM, //缩放控件类型 仅包含缩放按钮
               anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
           }
       ));
   },100);**
Logo

前往低代码交流专区

更多推荐