微信小程序如何使用地图开发获取位置信息

  1. app.json中开发小程序的接口权限,设置permission的权限,在里面配置scope.userLocation,开放位置权限,代码如下所示:
"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的展示" 
    }
  },
  1. 在页面indx.wxml中,调用map的信息,代码如下所示:
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" class="map"></map>
  1. data中定义经度和纬度信息,设置longitudelatitude的值为空,代码如下所示:
longitude: "",
latitude: ""
  1. 在页面当中index.js进行相应的配置,在Page中,onShow()方法调用一个获取位置的函数,使得一进入页面的时候,就会执行,获取到当前的位置信息,代码如下所示:
onShow() {
    this.getLocation()
}
  1. Page中定义getLocation()函数,写上wx.getLocation()方法,获取到当前的地理位置,在里面定义type类型为gcj02,同时调用成功后的回调函数,代码如下所示:
getLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: this.getLocationSucces.bind(this)
    })
}
  1. Page中定义getLocationSucces()函数,通过this.setData()方法,将响应获得的经度和纬度值赋值给当前的经度和纬度值,就可以成功使用地图开发获取到当前的位置信息,代码如下所示:
getLocationSucces(res) {
    this.setData({
      longitude: res.longitude,
      latitude: res.latitude
    })
}
发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_42614080/article/details/103964630