百度地图 marker 水波纹

百度地图的marker水波纹效果是一种用来增强地图标记点的视觉效果的特殊效果。水波纹效果能够给marker点增加动态感，使其更加突出和引人注目。

水波纹效果可以让marker点在被点击或者鼠标悬停时产生波动的效果，就好像是石头扔入水中产生的一圈圈涟漪。这种效果往往会吸引用户的注意力，使得一个普通的地图标记点变得更加生动和有趣。

百度地图提供了丰富的marker水波纹效果选项，可以根据不同的需求选择不同的样式和动画效果。用户可以设置水波纹的颜色、透明度、运动速度等参数，以及是否循环播放、是否自动消失等设置，以满足自己对marker水波纹效果的个性化需求。

使用marker水波纹效果可以给地图标记点增加一种动态的交互效果，让用户更容易注意到重要的信息点或者特定的地点。特别是在一些需要突出某些地点的应用场景，比如导航、景点推荐等，marker水波纹效果能够更加直观地吸引用户的注意力，提升用户体验。

总之，百度地图marker水波纹效果是一种用来增加地图标记点的动态效果，可以帮助用户更好地理解地图上的信息，并提升用户的交互体验。

相关问题

如何在Vue项目中利用百度地图API实现具有水波纹动画效果的自定义覆盖物？

在Vue项目中实现百度地图的自定义覆盖物，特别是带有水波纹动画效果的覆盖物，需要对HTML、CSS和JavaScript有深入的理解。推荐参考《Vue中使用百度地图实现自定义覆盖物：水波纹效果详解》这一资料，它提供了从基础到高级的完整实现过程。

参考资源链接：[Vue中使用百度地图实现自定义覆盖物：水波纹效果详解](https://wenku.csdn.net/doc/7cuvyu5vzm?spm=1055.2569.3001.10343)

首先，需要在Vue组件中引入百度地图API，并在地图初始化完成后，创建一个自定义覆盖物实例。我们可以通过创建一个继承自`BMap.Overlay`的类，并重写`draw`方法来绘制我们的覆盖物。在`draw`方法中，我们将使用HTML和CSS来创建包含水波纹动画的DOM元素。

具体来说，我们需要在HTML中创建一个包含红心的容器，并为水波纹动画创建一个或多个`.ripple`元素。这些`.ripple`元素将通过CSS来实现动画效果。可以使用`@keyframes`定义一个名为`ripple`的动画，其中包含`transform: scale()`属性来实现水波纹的向外扩散效果。然后，将这个动画应用到`.ripple`元素上，并通过设置`animation`属性来控制动画的持续时间、延迟和循环次数。

在Vue组件中，利用`mounted`钩子来初始化地图和创建自定义覆盖物。使用`BMap.Marker`类创建一个标记，并通过设置其位置来定位自定义覆盖物。最后，将自定义覆盖物添加到地图上的指定位置。

实现这一效果的关键在于CSS动画的运用以及JavaScript的DOM操作能力。具体到代码实现，需要细致地处理元素的定位、动画和定时器的精确控制。如果你希望进一步深入学习关于Vue、百度地图以及前端技术的更多内容，建议深入阅读《Vue中使用百度地图实现自定义覆盖物：水波纹效果详解》中的详细教程和案例。

参考资源链接：[Vue中使用百度地图实现自定义覆盖物：水波纹效果详解](https://wenku.csdn.net/doc/7cuvyu5vzm?spm=1055.2569.3001.10343)

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中使用百度地图添加自定义覆盖物（水波纹）了。