vue-baidu-map中marker将图标换为自定义
时间: 2023-10-17 18:15:05 浏览: 46
1. 在项目中引入自定义图标的图片资源。
2. 在使用marker时,通过传入icon参数来指定自定义图标的路径,代码如下:
```html
<template>
<div id="map"></div>
</template>
<script>
import BaiduMap from 'vue-baidu-map'
export default {
components: {
BaiduMap
},
data () {
return {
markers: [
{
lng: 116.404,
lat: 39.915,
icon: require('@/assets/marker.png') // 自定义图标路径
}
]
}
}
}
</script>
```
3. 在CSS中定义自定义图标的样式,例如:
```css
/* 自定义图标样式 */
.my-marker {
width: 24px;
height: 24px;
background-image: url('@/assets/marker.png');
background-size: cover;
}
```
4. 在使用marker时,通过传入icon参数来指定自定义图标的样式,代码如下:
```html
<template>
<div id="map"></div>
</template>
<script>
import BaiduMap from 'vue-baidu-map'
export default {
components: {
BaiduMap
},
data () {
return {
markers: [
{
lng: 116.404,
lat: 39.915,
icon: {
className: 'my-marker' // 自定义图标样式类名
}
}
]
}
}
}
</script>
```