vue2开发离线百度地图

前期的准备工作和基本的离线地图使用，是参考了这位博主的文章：

vue-内网，离线使用百度地图（地图瓦片图下载静态资源展示定位）_vue 百度离线地图-优快云博客

按照上面的文章，我们已经可以使用离线百度地图了，接下来就是对于离线百度地图的个性化设置，每个人遇到的需求不一样所以对于自定义一些离线地图的功能需求很大，所以我重点展示我自己写的一些自定义功能，希望能帮到各位！

1.创建离线地图和创建对应的点位；

//html
<div id="container"></div>

//JavaScript
 data() {
    return{
        markList:[],
        map:null,
        mk: []
    }
}

mounted() {
    // 加载地图
    this.$nextTick(() => {
      this.initMap()
    })
}

watch: {
    markList: {
      handler(newValue) {
        this.clearAllMarkers()
        if (newValue.length > 0) {
          for (let i = 0; i < newValue.length; i++) {
            const element = newValue[i];
            const iconUrl = this.iconStyle(element); // 动态生成图标 URL
            const iconSize = this.flag === 'factory'
              ? new BMap.Size(35, 39)
              : new BMap.Size(20, 20); // 动态设置大小
            const iconOffset = this.flag === 'factory'
              ? new BMap.Size(-0.8, -14)
              : new BMap.Size(-1, -1); // 动态设置偏移量

            const myIcon = new BMap.Icon(iconUrl, iconSize, {
              imageSize: iconSize,
              anchor: iconOffset
            });

            // 创建点
            const point = new BMap.Point(element.longitude, element.latitude);
            const marker = new BMap.Marker(point, { icon: myIcon });
            this.map.addOverlay(marker);
            this.mk.push(marker);
            // 绑定点击事件
            marker.addEventListener('click', () => {
              this.lookDetail(element);
            });
          }
        }
      }, deep: true
    }
  },
methods: {
    clearAllMarkers() {
      for (let i = 0; i < this.mk.length; i++) {
        this.map.removeOverlay(this.mk[i]); // 从地图中移除标记
      }
      this.mk = []; // 清空保存的标记数组
    },
    // 获取地图
    initMap() {
      // 内网使用-地图对象-在public/index.html引入文件
      let BMap = window.BMap
      // this指向
      const that = this
      // 创建Map实例
      this.map = new BMap.Map('container')
      // 地图中心点
      let Point = new BMap.Point(118.09584, 24.48603)
      // 初始化地图中心点和放大级别
      this.map.centerAndZoom(Point, 18)
      // 限制地图放大等级
      this.map.setMinZoom(11)
      this.map.setMaxZoom(19)
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)
    },
}

上面的代码是创建离线地图，并且监听对应的数组，根据数组创建对应的点位；this.markList是一个数组，根据数组长度生成对应的点位数量，以下是this.markList的数据结构。

在数据发生变化后，需要使用this.clearAllMarkers()方法清除掉旧点位数据，然后再重新生成新的点位，按照代码动态生成图标的url就是你对点位图标要显示成什么样的，还可以动态的设置点位的大小。以下是使用了厦门市的离线瓦片数据做的地图效果，需要下载数据的可以参考最上面那位博主的文章下载。 效果图如下：

2.点位的信息窗口展示；

首先我们需要在html部分自定义你需要的窗口样式：

 <div class="info-window" id="infoWindow" style="position: absolute;">
      <div class="info_boxs" v-if="flag == 'factory'">
        <div class="info_boxs_title">
         <!-- 自定义 -->
        </div>
       </div>
</div>

注意：div的id和position: absolute这两个不能少，id下面会使用到，position: absolute;是必须的，不然窗口会显示不出来；

然后我们创建一个方法，调用这个方法后可以生成对应点位的信息窗口：

changeWindow(newItem) {
      const info = document.getElementById("infoWindow");
      let infoWindow = new BMap.InfoWindow(info);
      let Point = new BMap.Point(newItem.longitude, newItem.latitude)
      this.$nextTick(() => {
        this.map.openInfoWindow(infoWindow, Point);  // 在指定位置打开信息窗口
      })
    },

在这个方法中，我们通过document.getElementById("xxx")获取到想要将那个div设置成自定义的窗口样式，然后通过let infoWindow = new BMap.InfoWindow(info);创建信息窗口，再根据经纬度让窗口显示在哪个位置，这里我是给点位添加了click事件，所以调用这个方法可以直接拿到对应点位的经纬度数据，再通过this.map.openInfoWindow(infoWindow, Point);  在指定位置打开信息窗口；效果图如下：

3.如果地图页面有列表，想要通过点击列表数据将地图显示到对应的位置；

我们一般地图都会有需求，点击某某设备，根据这个设备的经纬度我们地图也要显示到那个地方。以下就是这种需求的实现方法：

this.map.centerAndZoom(this.equipmentOldCenter, 17);
setTimeout(() => {
    this.map.panTo(new BMap.Point(item.longitude, item.latitude));
    this.changeWindow(item)
}, 200)

• 通过 this.map.centerAndZoom 方法将地图中心点设置为 this.oldCenter，并将缩放级别设置为 17。
• this.oldCenter 是一个坐标点对象，通常包含 longitude 和 latitude（经纬度）属性，用于指定地图的初始中心点。
• 平移到新位置：调用 this.map.panTo 将地图平滑移动到新的坐标点 item.longitude 和 item.latitude。

• 调用 this.changeWindow(item)显示对应设备的信息窗口；

以上就是本文章的全部内容了，感谢观看！！