小程序使用腾讯地图获取当前位置和地图选取位置

获取当前位置

申请开发者密钥(key):申请密钥

开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2

安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  getLocationAddress() {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      // 此key需要用户自己申请
      key: 'XXXXXXXXXXXXX'
    });
    var that = this;
    // 调用接口
    qqmapsdk.reverseGeocoder({
      success: function (res) {
        console.log("success");
        console.log(res);
        that.setData({
          address: res.result.address,
          lat: res.result.location.lat,
          lng: res.result.location.lng,
        });
        // 拿到当前地址和坐标
      },
      fail: function (res) {
        console.log(res);
      },
    });
  },
})

地图选取位置

chooseLocation(success) {
    // 定位授权
    wx.getSetting({
      success: function (res) {
        var settings = res.authSetting;
        if (!settings['scope.userLocation']) {
          wx.showModal({
            title: '发布需要授权定位功能',
            content: '请确认授权,否则地图功能将无法使用',
            success: function (tip) {
              if (tip.confirm) {
                console.log(tip.confirm)
                wx.openSetting({
                  success: function (data) {
                    if (data.authSetting["scope.userLocation"]) {
                      app.showToast("授权成功")
                    } else {
                      app.showToast("授权失败,请重新点击")
                    }
                  },
                  fail: function (data) {
                    console.log(data)
                  }
                })
              } else {
                app.showToast("授权失败,请重新点击")
              }
            },
          })
        }
      }
    });
    let that = this
    // 弹出地图选择页面
    wx.chooseLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          address: res.address, //调用成功直接设置地址
          resident: res.name,
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    })
  },


 

猜你喜欢

转载自blog.csdn.net/watson2017/article/details/118152750