要在
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.get
BMap()
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.get
BMap()
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中使用
百度地图添加自定义
覆盖物（水波纹）了。
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
