先来看实现效果图(uniapp实现,代码在下面)
在图片中我们看到标记点有以下需求:
1、标记点是自定义的,并不是微信默认
2、标记点的自定义icon有四种形式
3、数字是动态的
4、数字颜色有两种形式
数字动态展示使用
marker
的callout
和label
都可以,但是在苹果手机不显示label
,在安卓手机上callout
定位无效,所以在使用的时候用wx.getSystemInfo
获取一下手机型号,来分别展示callout
还是label
<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 } } } }