customCallout
,查看轨迹marker
latitude
longitude
markers:标记点
polyline:路线
show-location :显示带有方向的当前定位点
enable-satellite:是否开启卫星图
bindcallouttap:点击标记点对应的气泡时触发
e.detail = {markerId}
bindmarkertap:点击标记点时触发,
e.detail = {markerId}
<view class="page-section page-section-gap">
<map id="myMap" style="width: 100%; height: 100%;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" polyline="{{polyline}}" show-location enable-satellite="{{satellite}}" bindcallouttap="callouttap"
bindmarkertap="markertap">
map>
view>
.page-section-gap {
width: 100%;
height: 100vh;
box-sizing: border-box;
}
data: {
latitude:null,
longitude: null,
markers: [],
polyline: [],
deviceInfo:{deviceId:''},
showInfoBox:true
},
getDeviceStatus(data: string) {
//后端接口获取数据
ApiRequest.postParamReq(getDeviceStatusUrl, { deviceId: data }, (resp: Resp<any>) => {
if (resp.res) {
let data:any = [{id:1,latitude:resp.data.lat,longitude:resp.data.lng,customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS'
}}]
this.setData({
latitude: resp.data.lat,
longitude: resp.data.lng,
markers:data,
deviceInfo:resp.data
})
}
})
},
//点击marker控制气泡框的显隐
markertap(){
if(!this.data.showInfoBox){
this.setData({
showInfoBox:true
})
}else{
this.setData({
showInfoBox:false
})
}
},
onLoad(option: any) {
if (option.data) {
this.getDeviceStatus(option.data)
}
},
marker 上的自定义气泡 customCallout
customCallout
存在时将忽略callout
与title
属性。自定义气泡采用cover-view
定制,灵活度更高。
属性 说明 类型 最低版本 display ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 string 2.12.0 anchorX 横向偏移量,向右为正数 number 2.12.0 anchorY 纵向偏移量,向下为正数 number 2.12.0
<cover-view slot="callout">
<cover-view class="customCallout" marker-id="1">
<cover-view class="content">
<cover-view class="content-title">{{deviceInfo.devNum}}cover-view>
<cover-view class="content-btn">查看详情cover-view>
cover-view>
cover-view>
cover-view>
.customCallout {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
width: 600rpx;
height: 480rpx;
}
.content {
width: 100%;
height: 100%;
padding: 22rpx;
box-sizing: border-box;
}
.content-title {
width: 100%;
border-left: 2px solid #4994df;
padding-left: 12rpx;
margin-bottom: 22rpx
}
.content-btn {
width: 100%;
height: 60rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color:#4994df ;
}
最终效果
data:{
markers: [{
id: 1,
latitude: null,
longitude: null,
width:24,
height:48
}],
polyline: [{
points: [],
color: "#097bed",
width: 4
}],
}
getLine() {
//后端接口获取轨迹数据
ApiRequest.postBodyReq(getTractListUrl, this.data.timeData, (resp: Resp) => {
if (resp.res) {
let tempPoints: any = []
resp.data.trackList.forEach((data: any) => {
let item = {longitude:data.lng,latitude: data.lat};
tempPoints.push(item);
});
let tempMarker :any = [{id:1,longitude:tempPoints[0].longitude,latitude:tempPoints[0].latitude,width:"24",height:'48'},{id:2,longitude:tempPoints[tempPoints.length-1].longitude,latitude:tempPoints[tempPoints.length-1].latitude}]
wx.createMapContext('myMap').includePoints({
padding: [10, 10, 10, 10],
points: tempPoints,
});
this.setData({
markers:tempMarker,
points: tempPoints,
['polyline[0].points']: tempPoints,
})
}
})
},
属性 说明 类型 必填 备注 最低版本 points 经纬度数组 array 是 [{latitude: 0, longitude: 0}] width 线的宽度 number 否 color 线的颜色 string 否 十六进制