taro实现小程序地图打点

news2024/11/13 10:42:27

在这里插入图片描述
使用taro的map标签，往markers里放入点位：

<map v-if="mapLoading" id="mapId"
    :longitude="userPosition.x"
     :latitude="userPosition.y"
     :show-location="false"
     :markers="markerList"
     :scale="14"
     style="width: 100%; height: 100%;"
     @markertap="markertap"
/>

show-location：是否展示自己定位的经纬度
首先判断用户是否允许授权，
然后通过Taro.getLocation获取自己的经纬度，最后从接口里拿到点位，遍历放到markerList里面

然后点击点位触发的方法是markertap

 // 点数据储存
const markerList = ref<any>([])
function getUserLocationSetting() {
  Taro.getSetting({
    success: (res) => {
      if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
        Toast.showAlertModel('需要获取您的地理位置,请确认授权','请求授权当前位置',(result:any)=>{
          if (result.cancel == true){
            Toast.error('拒绝授权 暂时无法使用本功能')
            return
          }
          Taro.openSetting({
            success: (res) => {
              if (res.authSetting["scope.userLocation"] == true) {
                getUserLocation()
              }else {
                Toast.error('拒绝授权 暂时无法使用本功能')
              }
            }
          })
        })
      }else if (res.authSetting['scope.userLocation'] == undefined) {
        //用户首次进入页面,调用wx.getLocation的API
        getUserLocation()
      } else {
        console.log('授权成功')
        //调用wx.getLocation的API
        getUserLocation()
      }
    }
  })
}

 function getUserLocation () {
  Taro.getLocation({
    type: 'wgs84',
    success(res) {
      position = res
      userPosition.x = position.longitude
      userPosition.y = position.latitude

      console.log('userPosition',position)
      markerList.value = []
      markerList.value.push({
        iconPath: "",
        id: 0,
        longitude: userPosition.x,
        latitude: userPosition.y,
        width: 22,
        height: 22
      })
      points.push({
        latitude: position.latitude,
        longitude:  position.longitude,
      })
      initMarker()
    },
    fail(res) {
      console.log(res)
    }
  })
  // return position
}




function initMarker() {
  mapLoading.value = false
    let addMap = 0
    partyApi.partyMassMap({}).then(resp =>{
      mapLoading.value = true
      if(resp.success) {
        if(resp.value && resp.value.length > 0) {
          resp.value.forEach(item=>{
            if(item.wgs84X && item.wgs84Y) {
              console.log(item)
              markerList.value.push({
                iconPath: '',
                id:++addMap,
                longitude:parseFloat(item.wgs84X),
                latitude: parseFloat(item.wgs84Y),
                width: item.level==1?40:30,
                height:item.level==1?40:30
              })
              points.push({
                latitude: parseFloat(item.wgs84Y),
                longitude:  parseFloat(item.wgs84X),
              })
              console.log(markerList.value)
              Object.assign(partyMassData,resp.value)
            }
          })
        }
      }
    })
}