700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue百度地图 微信小程序marker自定义图标

vue百度地图 微信小程序marker自定义图标

时间:2019-11-25 00:37:17

相关推荐

vue百度地图 微信小程序marker自定义图标

先上vue-baidu-map的文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index

百度地图设置marker图标的方式有使用url地址和本地图片,首先是url的方式

<bm-markerv-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-windowtitle="设备信息":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./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})}});

另外图片太大可能只显示一个小角,这时可以把图片压缩一下,图片压缩的方法,见下面这篇文章。

/hmmmmm/article/details/121627727?spm=1001..3001.5501

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。