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

本文主要是介绍微信小程序自定义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（兼容苹果和安卓）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！