vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图

        为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScript版的了,话不多说,请看代码

1-第一步肯定是要引入啊,注意,是在vue的public出口文件的index.html中引入,因为我在这用到了聚合点,所以引入的有点多

注意：如果引入报错有这个警告

有这个警告就换成这种，key替换成自己的baidikey就可以了

3-个性化地图使用

打开百度开发者工具的控制台，第一次打开时没有地图显示了，需要创建，有很多种选择，还可以自定义配置颜色

点击下载样式文件

 

自行选择时开发哪个端的，我这边是pc端，下载完成后如下，有个json文件，放在你自己的项目里引入

 

2-引入完成后,在需要使用到的页面先写个div,宽高一定要给,这个就是我绘制的地图的画布了,不给宽高显示不出来，这边给了百分比的话，需要父级设置宽高

4-地图画布是完成了,什么时候去调用setmap(),我在是拿到数据后去调用的这个函数,不然如果页面刷新去调用那么地图肯定是显示不了的,因为提前就绘制了,但是没有数据

3-地图完整代码如下

setmap传入俩个参数,一个mapmarker就是后端传入参数,数据是[{lat:'',lon:''}],这种格式的,也就是经纬度

5-我在地图上定义了一个自定义按钮el-button,通过这个按钮进行切换地图是卫星还是个性化

{{ switchMap ? '卫星地图' : '个性化地图' }}

6-el-button控制切换

    // 卫星地图切换
    tagwxMap() {
      this.switchMap = !this.switchMap
      this.setMap(this.device_list, this.switchMap)
    }

7-最后显示效果如下,点是不会跳动的哈

 好了文章结束了,希望对你有所帮助~