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

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

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

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=百度地图申请的3.0版&s=1"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

2-全局引入完成后,在需要使用到的页面先写个div,宽高一定要给,这个就是我绘制的地图的画布了,不给宽高显示不出来

  <div id="container" style="height: 100%; width: 100%"></div>

3-地图代码如下

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

 setMap(mapmarker, switchMap) {
      // 百度地图API功能
      var pt = null
//聚合点
      var markers = []
      var arr = []
      arr = mapmarker
//创建百度地图画布
      var map = new BMap.Map('container')
      // 创建地图实例,必须有下面的这俩句,地图画布才算是绘制了,不然会报错mp找不到
      var point = new BMap.Point(arr[0].lon, arr[0].lat)
      // // 创建点坐标
      map.centerAndZoom(point, 10)
      // 个性化,通过switchMap 变量来控制是个性化还是卫星
      if (switchMap == 1) {
        // 设置个性化地图
        map.setMapStyleV2({
          styleId: 'js样式id'
        })
      } else {
        map.setMapType(BMAP_HYBRID_MAP) // 设置地图类型为卫星模式
      }

      map.enableScrollWheelZoom(true)//开启滚轮缩放
      arr.forEach((item) => {
        pt = new BMap.Point(item.lon, item.lat)//添加聚合点
        markers.push(new BMap.Marker(pt))
      })
      //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。,必须要写这个不然数据显示不出来
      var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers
      })
    },

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

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

<el-button
              v-if="gexhua"
              size="mini"
              class="tag-map"
              @click="tagwxMap()"
              >{
   
   { switchMap ? '卫星地图' : '个性化地图' }}</el-button
            >

6-el-button控制切换

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

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

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

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

猜你喜欢