编程语言
首页 > 编程语言> > 微信小程序自定义map组件标记点markers(兼容苹果和安卓)

微信小程序自定义map组件标记点markers(兼容苹果和安卓)

作者:互联网

先来看实现效果图(uniapp实现,代码在下面)

在图片中我们看到标记点有以下需求:
1、标记点是自定义的,并不是微信默认
2、标记点的自定义icon有四种形式
3、数字是动态的
4、数字颜色有两种形式

在这里插入图片描述

1、自定义标记点

在这里插入图片描述

2、自定义标记点icon(marker属性下使用)

在这里插入图片描述

3、动态数字(marker属性下使用)

数字动态展示使用markercalloutlabel都可以,但是在苹果手机不显示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,数字,自定义,标记,微信,callout,label,let
来源: https://blog.csdn.net/cbb_2313/article/details/116586608