9.地图定位，当前到店铺距离

1.wx.getLocation文档

用小程序自带的API接口wx.getLocation获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。

  onLoad: function (options) {
    wx.getLocation({
        success: function(res) {
            console.log(res.latitude, res.longitude)
        },
    })
  },

---

2.小程序接口权限相关设置，错误

permission位置相关权限声明文档

image.png

---

复制下载这段到App.json

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

permission-desc.496b775d.jpg

在App.json添加了permission，获取到了经纬度

image.png

---

3.腾讯地图

image.png

WebService API* 逆地址解析(坐标位置描述)

使用腾讯地图获取当前用户地址，

  onLoad: function (options) {
    wx.getLocation({
        success: function(res) {
            console.log(res.latitude, res.longitude)
            wx.request({
                url: 'https://apis.map.qq.com/ws/geocoder/v1',
                data: {
                    location: `${res.latitude},${res.longitude}`,
                    key: "PRVBZ-SXNKF-VWSJG-NOTTL-BW4D7-XBBQZ"
                },
                success: res => {
                    console.log(res.data.result.address)
                }
            })
        },
    })
  },

报错未开启WebserviceAPI

image.png

解决方案：进入设置，勾选WebserviceAPI

image.png

勾选WebserviceAPI

image.png

成功之后地址不准确

image.png image.png

Page({

  /**
   * 页面的初始数据
   */
  data: {
      address: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getLocation({
        type: 'gcj02',
        success: (res) => {
            console.log(res.latitude)
            wx.request({
                url: 'https://apis.map.qq.com/ws/geocoder/v1/',
                data: {
                    location: `${res.latitude},${res.longitude}`,
                    key: 'PRVBZ-SXNKF-VWSJG-NOTTL-BW4D7-XBBQZ'
                },
                success: (res) => {
                    console.log(res)

                    this.setData({
                        address: res.data.result.formatted_addresses.recommend
                    })
                }
            })
        },
    })
  },
})

最后用小程序真机调试，获取详细地址返回wxml页面

---

获取当前位置到北京长楹天街de距离

Page({

  /**
   * 页面的初始数据
   */
  data: {
      address: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getLocation({
        type: 'gcj02',
        success: (res) => {
            // console.log(res.latitude, res.longitude)
            wx.request({
                url: 'https://apis.map.qq.com/ws/geocoder/v1/',
                data: {
                    address: `北京长楹天街`,
                    key: 'PRVBZ-SXNKF-VWSJG-NOTTL-BW4D7-XBBQZ'
                },
                success: (res1) => {
                    // console.log(res1.data.result.location.lat, res1.data.result.location.lng)
                    wx.request({
                        url: 'https://apis.map.qq.com/ws/distance/v1/',
                        data: {
                            mode: "walking",
                            from: `${res.latitude},${res.longitude}`,
                            to: `${res1.data.result.location.lat},${res1.data.result.location.lng}`,
                            key: 'PRVBZ-SXNKF-VWSJG-NOTTL-BW4D7-XBBQZ'
                        },
                        success: res2 => {
                            console.log(res2.data.result.elements[0].distance)
                            this.setData({
                                address: res2.data.result.elements[0].distance
                            })
                        }
                    })
                }
            })
        },
    })
  },
})