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

        为什么用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>

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

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

    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak={$key}"></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>

3-个性化地图使用

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

点击下载样式文件

 

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

 

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

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

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

3-地图完整代码如下

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

<template>
  <div class="map">
    <div id="container" style="height: 100%; width: 100%"></div>
    <button v-if="gexhua" size="mini" class="tag-map" @click="tagwxMap()">
      {{ switchMap ? "卫星地图" : "个性化地图" }}
    </button>
  </div>
</template>
 
<script>
import stylemap from "./custom_map_config";
export default {
  data() {
    return {
      mapmarker: [
        { lon: 121.388495, lat: 31.171609, type: 1 },
        { lon: 121.459785, lat: 31.173834, type: 2 },
        { lon: 121.423853, lat: 31.167036, type: 3 },
        { lon: 121.426584, lat: 31.18335, type: 4 },
        { lon: 121.409192, lat: 31.173339, type: 1 },
        { lon: 121.436788, lat: 31.167901, type: 4 },
        { lon: 121.404737, lat: 31.161969, type: 4 },
        { lon: 121.389358, lat: 31.182855, type: 2 },
      ],
      switchMap: true,
      gexhua: true,
    };
  },
  mounted() {
    this.setMap(this.mapmarker,this.switchMap);
  },
  methods: {
    // 卫星地图切换
    tagwxMap() {
      this.switchMap = !this.switchMap;
      this.setMap(this.mapmarker, this.switchMap);
    },
    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({ styleJson: stylemap })
      } 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类即可。,必须要写这个不然数据显示不出来
       new BMapLib.MarkerClusterer(map, {
        markers: markers,
      });
    },
  },
};
</script>
 
<style lang="scss" scoped>
.map {
  height: 500px;
  width: 500px;
  border: 1px solid red;
}
.tag-map{
  position: fixed;
  top: 30px;
  left: 400px;
  z-index: 1000;
}
</style>

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-最后显示效果如下,点是不会跳动的哈

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