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

1. 在app.json中开发小程序的接口权限，设置permission的权限，在里面配置scope.userLocation，开放位置权限，代码如下所示：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的展示" 
    }
  },

2. 在页面indx.wxml中，调用map的信息，代码如下所示：

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" class="map"></map>

3. 在data中定义经度和纬度信息，设置longitude和latitude的值为空，代码如下所示：

longitude: "",
latitude: ""

4. 在页面当中index.js进行相应的配置，在Page中，onShow()方法调用一个获取位置的函数，使得一进入页面的时候，就会执行，获取到当前的位置信息，代码如下所示：

onShow() {
    this.getLocation()
}

5. 在Page中定义getLocation()函数，写上wx.getLocation()方法，获取到当前的地理位置，在里面定义type类型为gcj02，同时调用成功后的回调函数，代码如下所示：

getLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: this.getLocationSucces.bind(this)
    })
}

6. 在Page中定义getLocationSucces()函数，通过this.setData()方法，将响应获得的经度和纬度值赋值给当前的经度和纬度值，就可以成功使用地图开发获取到当前的位置信息，代码如下所示：

getLocationSucces(res) {
    this.setData({
      longitude: res.longitude,
      latitude: res.latitude
    })
}

• 点赞
• 收藏
• 分享
• • 文章举报

旧城tk 发布了125 篇原创文章 · 获赞 29 · 访问量 2万+ 私信 关注

标签：getLocation,获取,微信,代码,地图,longitude,如下,latitude,所示
来源： https://blog.csdn.net/weixin_42614080/article/details/103964630