微信小程序自定义map组件标记点markers(兼容苹果和安卓)
2021/5/11 14:55:41
本文主要是介绍微信小程序自定义map组件标记点markers(兼容苹果和安卓),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
先来看实现效果图(uniapp实现,代码在下面)
在图片中我们看到标记点有以下需求:
1、标记点是自定义的,并不是微信默认
2、标记点的自定义icon有四种形式
3、数字是动态的
4、数字颜色有两种形式
1、自定义标记点
2、自定义标记点icon(marker属性下使用)
3、动态数字(marker属性下使用)
数字动态展示使用
marker
的callout
和label
都可以,但是在苹果手机不显示label
,在安卓手机上callout
定位无效,所以在使用的时候用wx.getSystemInfo
获取一下手机型号,来分别展示callout
还是label
4、数字颜色不同
5、代码实现
<map class="map" :longitude="currLoca.longitude" :latitude="currLoca.latitude" :show-location="true" :markers="markers" @markertap="fetchShopDetail" @labeltap="fetchShopDetail" @callouttap="fetchShopDetail" :scale="11" id="map" ref="map" ></map>
export default { data() { return { // 用户当前定位信息 currLoca: {}, // 自定义标记点 markers: [] } }, onLoad() { this.init() }, methods: { // 初始化 init() { let that = this // 用户授权,拿到用户所在位置信息 uni.getLocation({ type: 'gcj02', async success (res) {}, async complete(res) { // 如果同意位置授权获取机主位置,否则默认北京天安门经纬度 if (res.errMsg == 'getLocation:ok') { that.currLoca = res } else { that.currLoca = { longitude: 116.39747, latitude: 39.908823, } } // 调接口获取地图点数据 that.getMapMarkers() } }) }, // 获取地图标记点 async getMapMarkers() { let that = this let markarr = [] // 请求接口 const { status, data } = await shopArea({ lon: that.currLoca.longitude, lat: that.currLoca.latitude }) if (status == 1) { // 遍历数据,定义标记点 data.forEach(i => { // 动态数字颜色 let labelColor = i.batteryNum == 0 ? '#aaaab0' : '#4544BC' // 标记点icon的四种形式 let shopGrey = that.$function.dealImageUrl('/common/md-none-bg.png') let shopPurple = that.$function.dealImageUrl('/common/md-have-bg.png') let siteGrey = that.$function.dealImageUrl('/common/zd-none.png') let sitePurple = that.$function.dealImageUrl('/common/zd-have-bg.png') let iconPath = i.shopType == 1 ? i.batteryNum == 0 ? shopGrey : shopPurple : i.batteryNum == 0 ? siteGrey : sitePurple // 自定义标记点 let markObj = { id: i.id, latitude: i.lat, longitude: i.lon, iconPath, width: '89rpx', height: '103rpx', shopType: i.shopType, // 这个zIndex一定要有,并且不能是一个固定值,否则会出现标记点和label,callout层级混乱 zIndex: i.id + 1 } // 单独定义callout let callout = { // 动态数字展示 content: JSON.stringify(i.batteryNum), // 动态数字颜色 color: labelColor, fontSize: '32rpx', bgColor: '#00000000', borderRadius: '10', // 数字定位,放在中间 anchorX: '0rpx', anchorY: '30rpx', // 数字常显示 display: 'ALWAYS' } // 单独定义label let label = { // 动态数字展示 content: i.batteryNum, // 动态数字颜色 color: labelColor, fontSize: '32rpx', bgColor: '#fff', borderRadius: '10', // 数字定位,放在中间 anchorX: '-10rpx', anchorY: '-90rpx' } // 获取当前手机型号 uni.getSystemInfo({ success(res) { // res.platform - 客户端平台,值域为:ios、android、mac(3.1.10+)、windows(3.1.10+)、linux(3.1.10+) // 苹果手机的数字使用callout,安卓的数字使用label if (res.platform == 'ios') { markObj.callout = callout } else { markObj.label = label } } }) markarr.push(markObj) }) that.markers = markarr } } } }
这篇关于微信小程序自定义map组件标记点markers(兼容苹果和安卓)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06微信小程序 将base64 图片格式转换为本地文件-icode9专业技术文章分享
- 2024-07-03微信小程序分享跳转-icode9专业技术文章分享
- 2024-07-03小程序微信支付提示缺少total_fee-icode9专业技术文章分享
- 2024-07-03微信小程序携带参数分享 前后端交互流程-icode9专业技术文章分享
- 2024-07-02微信小程序中禁止左右滑动切换页面-icode9专业技术文章分享
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)