微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题

文章发布于2020年08月05日 17:59, 归类于: 前端

请在手机上调试,手机上才可以获取高精度地理位置,开发工具不准确。

latitude和longitude最好设置默认值,为空的话有可能出现一个5秒以上的loading,ios上遇到过。

在开发的时候使用uni.getLocation()获取用户的地理位置,获取的位置与实际位置偏差几百米。可以使用map组件的getCenterLocation()获取更精确的位置信息。

1)定义组件

<map id="map" :latitude="latitude" :longitude="longitude" :enable-rotate="true" scale="16" show-location></map>

2)获取map实例

data() {
  return {
    latitude: '23.08331',
	  longitude: '113.3172'
  }
},
onLoad() {
  this.MapContext = uni.createMapContext('map')
}

3)获取位置、解决ios手机无法回到map中心点

// 移到map组件中心点
this.MapContext && this.MapContext.moveToLocation({
  complete:()=>{
    // 获取map组件中心点经纬度
    this.MapContext.getCenterLocation({
      complete:res=>{

        if(res.latitude){
          this.latitude = res.latitude
        }

        if(res.longitude){
          this.longitude = res.longitude
        }

        // 解决ios手机无法回到map中心点
        setTimeout(() => {
          this.MapContext.moveToLocation()
        }, 1000)

      }
    })
  }
})

建议先使用uni.getLocation()获取位置:

uni.getLocation({
  type: 'wgs84',
  altitude: true, // 高精度
  isHighAccuracy: true, // 高精度
  complete: res => {

    let latitude = res.latitude ? res.latitude : this.latitude
    let longitude = res.longitude ? res.longitude : this.longitude

    setTimeout(() => {
      // 移到map组件中心点
      this.MapContext && this.MapContext.moveToLocation({
        complete: () => {

          // 获取map组件中心点经纬度
          this.MapContext.getCenterLocation({
            complete: location => {

              latitude = location.latitude ? location.latitude : this.latitude
              longitude = location.longitude ? location.longitude : this.longitude

              // 解决ios手机无法回到map中心点
              setTimeout(() => {
                this.MapContext.moveToLocation()
              }, 1000)

            }
          })
        }
      })
    }, 500)
    
  }
})

转载请注明来源:《 微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题》- rojerYong's Blog

文章链接:https://www.eoway.cn/article/1596621578.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:联想小新13pro无法充电 下一篇:web性能优化,使用preload和prefetch预加载资源