微信小程序自定义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,数字,自定义,标记,微信,callout,label,let 来源: https://blog.csdn.net/cbb_2313/article/details/116586608