mpvue小程序框架-地图定位(二)

最新推荐文章于 2024-04-23 09:47:51 发布

此鱼非闲鱼也

最新推荐文章于 2024-04-23 09:47:51 发布

阅读量731

点赞数

分类专栏：微信小程序文章标签：腾讯地图定位小程序 mpvue

本文链接：https://blog.csdn.net/m0_45315697/article/details/106814739

版权

本文介绍了如何在mpvue小程序中使用腾讯地图定位功能。首先需要在app.json声明permission，然后申请开发者密钥，并开通webserviceAPI服务。接着配置微信位置服务和安全域名，最后解决mpvue对commonjs规范的支持问题，实现地图定位并显示地理坐标。

摘要由CSDN通过智能技术生成

使用腾讯地图定位
需要使用微信公众平台permission接口
首先要在小程序项目下的主配置文件app.json中声明permission，
不然使用接口方法时，提示窗口如下：
需要在app.json中声明permission字段
app.json配置文件中声明permission

  "pages":["pages/home/main"],
  "permission": {
   
    "scope.userLocation": {
   
      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
  },
    "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

腾讯位置服务
腾讯位置服务为微信小程序提供了

基础的标点能力、
线和圆的绘制接口等地图组件和位置展示、
地图选点等地图API位置服务能力支持

JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，

可以在小程序中调用腾讯位置服务的POI检索、
关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务

使用腾讯位置服务的准备工作有哪些？

申请开发者密钥（key）：申请密钥
使用已登录的微信开发者账号，通过手机号绑定，或者重新注册新账号申请秘钥，
这里就使用自己的开发者账号了。
开通webserviceAPI服务：【控制台】 -【key管理】 -【设置】（使用该功能的key）- 勾选webserviceAPI -【保存】
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
配置微信位置服务，需要之前申请的Key名称、勾选启用产品后的【微信小程序】与【WebServiceAPI】-【域名白名单】，然后保存即可。

秘钥名称及秘钥值
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

配置request合法域名
安全域名设置
保存提交，配置完成后，我们在微信开发者工具-【项目配置】中，看到配置好的request合法域名
微信小程序项目的项目配置中显示request合法域名
注意：引入qqmap-wx-jssdk时，解决mpvue不支持 commonjs规范的问题
修改.babellrc文件，plugins添加"transform-es2015-modules-commonjs"

  "plugins": ["transform-runtime","transform-es2015-modules-commonjs"]

示例如下：
定位 pages/home/main.js

let QQMapWx = require('../utils/qqmap-wx-jssdk.min.js'); //引入SDK核心类
let qqmapsdk = new QQMapWx({
   
   // 秘钥（你自己注册的账号申请的），这里我使用的是用自己的微信开发者账号申请的秘钥
   key:'3D2BZ-QT3WX-NLJ4I-74S5M-5QNLT-QEF6P'
})
Page({
   
  /*页面的初始数据*/
  data: {
   
    address:"加载中"
  },

  /*生命周期函数--监听页面加载*/
  onLoad: function onLoad(options) {
   
    wx.getLocation({
   
      type: 'wgs84',
      // 使用箭头函数
      success: (res) => {
   
        console.log(res)
        qqmapsdk.reverseGeocoder({
   
          location: {
   
            // 纬度
            latitude: res.latitude,
            // 经度
            longitude