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

要在Vue中使用百度地图添加自定义覆盖物，可以使用vue-baidu-map这个库来实现。在vue-baidu-map中，可以使用百度地图API中提供的Overlay类来创建自定义覆盖物。

以下是在vue-baidu-map中添加自定义覆盖物的步骤：

1. 安装vue-baidu-map

在终端中运行以下命令来安装vue-baidu-map：

npm install vue-baidu-map --save

2. 注册vue-baidu-map组件

在Vue组件中注册vue-baidu-map组件：

import BaiduMap from 'vue-baidu-map'

export default {
  components: {
    BaiduMap
  }
}

3. 在模板中添加地图

在模板中添加vue-baidu-map标签，并设置地图的中心点和缩放级别：

<template>
  <div>
    <BaiduMap :center="center" :zoom="zoom"></BaiduMap>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        center: {lng: 116.404, lat: 39.915},
        zoom: 15
      }
    }
  }
</script>

4. 创建自定义覆盖物

在Vue组件的mounted()生命周期函数中，创建自定义覆盖物：

mounted() {
  const map = this.$refs.baiduMap.getBMap()
  const BMap = window.BMap
  const point = new BMap.Point(116.404, 39.915)
  const myIcon = new BMap.Icon('path/to/myIcon.png', new BMap.Size(30, 30))
  const marker = new BMap.Marker(point, {icon: myIcon})
  map.addOverlay(marker)
}

在上面的代码中，我们创建了一个自定义覆盖物，它是一个图片标记，位于地图的(116.404, 39.915)处。我们使用BMap.Icon类来创建一个自定义图标，并使用BMap.Marker类来创建一个标记，并将它添加到地图中。

5. 在模板中显示自定义覆盖物

在模板中添加自定义覆盖物的容器，并使用CSS样式设置容器的位置和大小：

<template>
  <div>
    <BaiduMap :center="center" :zoom="zoom"></BaiduMap>
    <div class="marker-container"></div>
  </div>
</template>

<style>
  .marker-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
  }
</style>

在上面的代码中，我们添加了一个名为"marker-container"的DIV容器，用于显示自定义覆盖物。我们使用CSS样式将容器放置在地图的中心位置，并设置容器的大小为30x30，该大小与自定义图标的大小相同。

6. 显示水波纹效果

要在自定义覆盖物上显示水波纹效果，可以使用CSS3动画和JavaScript。以下是实现水波纹效果的代码：

mounted() {
  const map = this.$refs.baiduMap.getBMap()
  const BMap = window.BMap
  const point = new BMap.Point(116.404, 39.915)
  const myIcon = new BMap.Icon('path/to/myIcon.png', new BMap.Size(30, 30))
  const marker = new BMap.Marker(point, {icon: myIcon})
  map.addOverlay(marker)

  const ripple = document.createElement('div')
  ripple.classList.add('ripple')
  marker.getContent().appendChild(ripple)

  marker.addEventListener('click', e => {
    const x = e.offsetX
    const y = e.offsetY
    ripple.style.left = x + 'px'
    ripple.style.top = y + 'px'
    ripple.classList.add('ripple-active')
    setTimeout(() => {
      ripple.classList.remove('ripple-active')
    }, 1000)
  })
}

在上面的代码中，我们使用JavaScript创建了一个DIV元素，用于显示水波纹效果。我们将这个DIV元素添加到自定义覆盖物的容器中，并在自定义覆盖物上添加了一个点击事件监听器。当用户点击自定义覆盖物时，我们获取点击位置的坐标，并将水波纹DIV元素定位到该位置，并添加CSS3动画类"ripple-active"来显示水波纹效果。我们在1秒后从水波纹DIV元素中移除"ripple-active"类，以停止水波纹效果。

7. 添加CSS样式

最后，我们需要添加CSS样式来定义水波纹效果和自定义覆盖物的样式：

.marker-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s linear;
}

.ripple-active {
  opacity: 1;
}

在上面的代码中，我们定义了"marker-container"类来设置自定义覆盖物的样式，以及"ripple"和"ripple-active"类来设置水波纹效果的样式。我们使用"position: absolute"来定位元素，并使用"transform: translate(-50%, -50%)"将元素的中心点设置为其父元素的中心点。我们还使用"opacity"和"transition"属性来定义水波纹效果的透明度和过渡效果。

这样就可以在Vue中使用百度地图添加自定义覆盖物（水波纹）了。