如何在vue中使用百度地图添加自定义覆盖物（水波纹）

下面我来详细讲解如何在Vue中使用百度地图添加自定义覆盖物（水波纹）的完整攻略。

1. 准备工作

在开始添加自定义覆盖物之前，需要先引入百度地图控件的依赖和JS API文件。具体步骤如下：

在index.html页面中引入Baidu Map API文件和相关CSS样式：

<!-- 加载Baidu Map API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_app_key"></script>
<!-- 加载Baidu地图控件CSS样式 -->
<link rel="stylesheet" href="https://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool.css" />

其中your_app_key需要替换为你在百度地图开放平台申请的个人AK。

在src/main.js文件中引入百度地图控件依赖：

import 'vue-baidu-map/components/MarkerTool'

这样就完成了百度地图控件的引入。

2. 添加自定义覆盖物

接下来就可以开始添加自定义覆盖物了。具体步骤如下：

在Vue组件中引入Baidu Map组件：

import { BaiduMap } from 'vue-baidu-map';

在Vue模板中添加Baidu Map组件：

<template>
  <div>
    <baidu-map :center="center" :zoom="zoom" :map-style="mapStyle">
    </baidu-map>
  </div>
</template>

其中center表示地图中心点的经纬度坐标，zoom表示地图缩放级别，mapStyle表示地图样式。

添加自定义覆盖物：

<template>
  <div>
    <baidu-map :center="center" :zoom="zoom" :map-style="mapStyle" @ready="onReady">
      <marker-tool v-if="mapReady" :visible="true" :clickable="false" :editable="false" @markercomplete="onMarkerComplete"></marker-tool>
    </baidu-map>
  </div>
</template>

这里使用了marker-tool控件来添加自定义覆盖物。当地图加载完成后，该工具栏的markercomplete事件会被触发，从而可以在地图上添加自定义覆盖物。

在Vue实例中定义相关事件方法：

methods: {
  // 地图加载完成事件
  onReady(map) {
    this.mapReady = true;
    this.map = map;
  },
  // 添加自定义覆盖物
  onMarkerComplete(event) {
    // 创建自定义覆盖物实例
    const overlay = new CustomOverlay(event.marker.point, event.marker.title);
    // 添加自定义覆盖物到地图上
    overlay.setMap(this.map);
  }
}

这里定义了onReady事件和onMarkerComplete事件方法。当地图加载完成后，设置mapReady为true，并将地图实例保存到Vue实例中。当添加自定义覆盖物时，调用CustomOverlay构造函数创建自定义覆盖物实例，并添加到地图上。

添加自定义覆盖物类：

class CustomOverlay {
  constructor(point, title) {
    this._point = point;
    this._title = title;
  }

  // 实现自定义覆盖物的初始化方法
  initialize(map) {
    const container = document.createElement('div');
    container.innerHTML = `<div class="ripple">${this._title}</div>`;
    container.style.position = 'absolute';
    container.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    map.getPanes().labelPane.appendChild(container);
    this._container = container;
    return container;
  }

  // 实现自定义覆盖物的绘制方法
  draw() {
    const pixel = this._map.pointToOverlayPixel(this._point);
    this._container.style.left = pixel.x + 'px';
    this._container.style.top = pixel.y + 'px';
  }

  // 实现自定义覆盖物的销毁方法
  remove() {
    this._container.parentNode.removeChild(this._container);
    this._container = null;
  }

  // 实现自定义覆盖物的显示方法
  show() {
    if (this._container) {
      this._container.style.display = '';
    }
  }

  // 实现自定义覆盖物的隐藏方法
  hide() {
    if (this._container) {
      this._container.style.display = 'none';
    }
  }
}

这里通过自定义类CustomOverlay来实现自定义覆盖物，其中包括了覆盖物的初始化、绘制、销毁、显示、隐藏等方法。在初始化方法中，创建一个包含信息和水波纹的HTML元素，设置其样式和位置，并添加到地图标注层；在绘制方法中，更新HTML元素的位置和样式。

示例说明

这里提供两个示例，一个是添加单个自定义覆盖物，另一个是添加多个自定义覆盖物。

添加单个自定义覆盖物：

<template>
  <div>
    <baidu-map :center="center" :zoom="zoom" :map-style="mapStyle" @ready="onReady">
      <marker-tool v-if="mapReady" :visible="true" :clickable="false" :editable="false" @markercomplete="onMarkerComplete"></marker-tool>
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap } from 'vue-baidu-map';
import 'vue-baidu-map/components/MarkerTool'

class CustomOverlay {
  constructor(point, title) {
    this._point = point;
    this._title = title;
  }

  // 实现自定义覆盖物的初始化方法
  initialize(map) {
    const container = document.createElement('div');
    container.innerHTML = `<div class="ripple">${this._title}</div>`;
    container.style.position = 'absolute';
    container.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    map.getPanes().labelPane.appendChild(container);
    this._container = container;
    return container;
  }

  // 实现自定义覆盖物的绘制方法
  draw() {
    const pixel = this._map.pointToOverlayPixel(this._point);
    this._container.style.left = pixel.x + 'px';
    this._container.style.top = pixel.y + 'px';
  }

  // 实现自定义覆盖物的销毁方法
  remove() {
    this._container.parentNode.removeChild(this._container);
    this._container = null;
  }

  // 实现自定义覆盖物的显示方法
  show() {
    if (this._container) {
      this._container.style.display = '';
    }
  }

  // 实现自定义覆盖物的隐藏方法
  hide() {
    if (this._container) {
      this._container.style.display = 'none';
    }
  }
}

export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      mapStyle: {
        styleJson: [
          {
            "featureType": "road",
            "elementType": "all",
            "stylers": { "visibility": "off" }
          },
          {
            "featureType": "administrative",
            "elementType": "all",
            "stylers": { "visibility": "off" }
          }
        ]
      },
      mapReady: false,
      map: null,
    };
  },
  components: { BaiduMap },
  methods: {
    // 地图加载完成事件
    onReady(map) {
      this.mapReady = true;
      this.map = map;
    },
    // 添加自定义覆盖物
    onMarkerComplete(event) {
      // 创建自定义覆盖物实例
      const overlay = new CustomOverlay(event.marker.point, event.marker.title);
      // 添加自定义覆盖物到地图上
      overlay.setMap(this.map);
    }
  }
};
</script>

<style>
.ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0.5;
  top: -50px;
  left: -50px;
  animation: ripple 1.5s linear infinite;
}

@keyframes ripple {
  from {
    transform: scale(1);
    opacity: 0.5;
  }

  to {
    transform: scale(2);
    opacity: 0;
  }
}
</style>

添加多个自定义覆盖物：

<template>
  <div>
    <baidu-map :center="center" :zoom="zoom" :map-style="mapStyle" @ready="onReady">
      <marker-tool v-if="mapReady" :visible="true" :clickable="false" :editable="false" @markercomplete="onMarkerComplete"></marker-tool>
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap } from 'vue-baidu-map';
import 'vue-baidu-map/components/MarkerTool'

class CustomOverlay {
  constructor(point, title) {
    this._point = point;
    this._title = title;
  }

  // 实现自定义覆盖物的初始化方法
  initialize(map) {
    const container = document.createElement('div');
    container.innerHTML = `<div class="ripple">${this._title}</div>`;
    container.style.position = 'absolute';
    container.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    map.getPanes().labelPane.appendChild(container);
    this._container = container;
    return container;
  }

  // 实现自定义覆盖物的绘制方法
  draw() {
    const pixel = this._map.pointToOverlayPixel(this._point);
    this._container.style.left = pixel.x + 'px';
    this._container.style.top = pixel.y + 'px';
  }

  // 实现自定义覆盖物的销毁方法
  remove() {
    this._container.parentNode.removeChild(this._container);
    this._container = null;
  }

  // 实现自定义覆盖物的显示方法
  show() {
    if (this._container) {
      this._container.style.display = '';
    }
  }

  // 实现自定义覆盖物的隐藏方法
  hide() {
    if (this._container) {
      this._container.style.display = 'none';
    }
  }
}

export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      mapStyle: {
        styleJson: [
          {
            "featureType": "road",
            "elementType": "all",
            "stylers": { "visibility": "off" }
          },
          {
            "featureType": "administrative",
            "elementType": "all",
            "stylers": { "visibility": "off" }
          }
        ]
      },
      mapReady: false,
      map: null,
      data: [
        { lng: 116.417, lat: 39.918, title: '覆盖物1' },
        { lng: 116.407, lat: 39.928, title: '覆盖物2' },
        { lng: 116.437, lat: 39.908, title: '覆盖物3' }
      ]
    };
  },
  components: { BaiduMap },
  methods: {
    // 地图加载完成事件
    onReady(map) {
      this.mapReady = true;
      this.map = map;
      // 添加多个覆盖物
      this.data.forEach(item => {
        const point = new BMap.Point(item.lng, item.lat);
        const overlay = new CustomOverlay(point, item.title);
        overlay.setMap(this.map);
      });
    }
  }
};
</script>

<style>
.ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0.5;
  top: -50px;
  left: -50px;
  animation: ripple 1.5s linear infinite;
}

@keyframes ripple {
  from {
    transform: scale(1);
    opacity: 0.5;
  }

  to {
    transform: scale(2);
    opacity: 0;
  }
}
</style>

以上就是在Vue中使用百度地图添加自定义覆盖物的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在vue中使用百度地图添加自定义覆盖物（水波纹） - Python技术站