先上vue-baidu-map的文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index
百度地图设置marker图标的方式有使用url地址和本地图片,首先是url的方式
<bm-marker
v-if="marker.cate&&!marker.isOnline"
:position="{ lng: marker.lng, lat: marker.lat }"
:title="marker.machineName"
:dragging="true"
:icon="{url:markerImg, size: {width: 52, height: 52}}"
@click="infoWindowOpen(marker)"
/>
//请注意一定要加上size: {width: 52, height: 52},否则图片可能不显示。
然后是用本地的图片的方式,填写好正确的路由地址即可
<bm-marker
:key="item.id"
:dragging="false"
:top="true"
:icon="{
url: require('@/assets/images/onestar.png'),
size: { width: 30, height: 29 },
}"
:position="{ lng: item.longitude, lat: item.latitude }"
@click="infoWindowOpen(item)"
>
如果还想在图片下方加上描述,如下图
可以这样实现,加一个 标签即可,可以通过 :offset="{ width: -20, height: 28 }"来调整跟图标的距离。labelStyle来调整样式,加上click事件来打开 窗口。
<bm-marker
:position="{ lng: marker.lng, lat: marker.lat }"
:title="marker.machineName"
:dragging="true"
@click="infoWindowOpen(marker)"
>
<bm-info-window
title="设备信息"
:position="{ lng: marker.lng, lat: marker.lat }"
:show="marker.showFlag"
@close="infoWindowClose(marker)"
@open="infoWindowOpen(marker)"
>
<p class="window-items">设备名称:{{ marker.machineName }}</p>
<p class="window-items">设备负责人:{{ user }}</p>
<p class="window-items">设备地址:{{ address }}</p>
</bm-info-window>
<bm-label
@click="infoWindowOpen(marker)"
:content="marker.machineName"
:labelStyle="{
color: '#303133',
fontSize: '14px',
padding: '4px 8px',
backgroundColor: '#fff',
boxShadow: '0 3px 3px #999',
border: '1px solid rgb(171, 171, 171)',
}"
:offset="{ width: -20, height: 28 }"
/>
</bm-marker>
小程序中设置自动义的方法,首先也还是官方文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html
//html部分
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true"
markers="{{markers}}" bindmarkertap="makertap" bindcallouttap="callouttap"/>
// js部分
app.sendRequest({
url: "xxx",
success: (res) => {
markers = res.data;
markers.forEach((item) => {
item['iconPath'] = item.img//也可以直接写本地地址
item['width'] = 30//可以设置高宽
item['height'] = 30
})
self.setData({
markers: markers
})
}
});
另外图片太大可能只显示一个小角,这时可以把图片压缩一下,图片压缩的方法,见下面这篇文章。
https://blog.csdn.net/hmmmmm/article/details/121627727?spm=1001.2014.3001.5501