要在
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.getB
Map()
const B
Map = window.B
Map
const point = new B
Map.Point(116.404, 39.915)
const myIcon = new B
Map.Icon('path/to/myIcon.png', new B
Map.Size(30, 30))
const marker = new B
Map.Marker(point, {icon: myIcon})
map.addOverlay(marker)
}
```
在上面的代码中，我们创建了一个
自定义覆盖物，它是一个图片标记，位于
地图的(116.404, 39.915)处。我们使用B
Map.Icon类来创建一个
自定义图标，并使用B
Map.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.getB
Map()
const B
Map = window.B
Map
const point = new B
Map.Point(116.404, 39.915)
const myIcon = new B
Map.Icon('path/to/myIcon.png', new B
Map.Size(30, 30))
const marker = new B
Map.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中使用百度
地图添加自定义覆盖物（水波纹）了。
本文介绍了如何在Vue项目中利用vue-baidu-map库，在百度地图上添加自定义覆盖物（点）。通过创建一个名为MyOverLay的组件，结合bm-marker和overlay，实现了根据颜色显示不同所属者的标记。通过监听位置变化并重绘覆盖物，确保点的位置准确。同时，展示了如何使用不同的图标和样式来区分不同的点。
最低0.47元/天 解锁文章
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
