先上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