微信小程序----获取定位，并自定义气泡框customCallout,查看轨迹

微信小程序获取定位，并自定义气泡框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<any>) => {
      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	否	十六进制

最终效果