vue百度地图、⼩程序marker⾃定义图标
<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"
icon图标库@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>
//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
})
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。