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.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

vue百度地图、微信小程序marker自定义图标相关推荐

引用百度地图微信小程序JS API模块
1.原理前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面. 2. js 引入模块在 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...

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

vue百度地图、微信小程序marker自定义图标相关推荐

最新文章

热门文章