微信小程序怎么调用本机地图APP ？

最新推荐文章于 2024-06-02 21:40:20 发布

一介大人物

最新推荐文章于 2024-06-02 21:40:20 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：调用外部APP 小程序地图定位微信小程序地图

本文为博主原创文章，转载请说明来源。©ferryman

本文链接：https://blog.youkuaiyun.com/mythInternet/article/details/97390264

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在微信小程序中调用外部地图应用，通过腾讯地图SDK实现位置授权、获取经纬度及详细地址，并自动识别手机中已安装的地图APP。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言：实现微信小程序调用外部地图APP，类似微信聊天，打开别人发送的位置，然后自动识别当前手机中已有的地图APP，效果如下图所示：

此功能，主要在js上做处理：

微信小程序引用腾讯地图sdk，首先需要完成以下步骤：

1. 申请开发者密钥（key）：https://lbs.qq.com/console/key.html

2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

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

3. 下载微信小程序JavaScriptSDK，https://download.youkuaiyun.com/download/mythinternet/11435175

4. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

下面是微信小程序.js代码：

//1.引入腾讯地图mapSdk
const QQMapWX = require('qqmap-wx-jssdk.min.js');

//2.定义全局qqmapsdk变量;
let qqmapsdk;

Page({
    /**
     * 页面的初始数据
     */
    data: {
      nearbyMap:null
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getLocation();  //位置授权; 必须要启用位置授权功能，否则无法实现下一步
    },
    /**
     *@method： 获取位置授权
     */
    getLocation() {
      wx.authorize({
        scope: 'scope.userLocation',
        success: res => {
          console.log(res)
        },
        fail: fres => {
          let arr = {
            title: "",
            cont: '检测到您没打开定位权限，是否去设置打开？'
        }
        showConfirm(arr, res => {
            if (res.confirm) {
              wx.openSetting({
                success: (res) => {}
              })
            } else {
              console.log('取消获取授权')
            }
        })
        }
      })
    },
    // 跳转至详情页面
  toNavDs(event){
    wx.showLoading({
      title: '加载中',
    })
    let lon = '经度',lat = '纬度';  //此处经纬度是你的目标位置，进入微信预览页面展示;
    const adds = '详细地址'; //此处是你目标位置的详细地址，微信预览页面展示;
    // 使用 JavaScript SDK 获取目的地经纬度
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'YDVBZ-***********'  //key值是腾讯地图开发者平台自动生成，需要自己去注册账户
    });
    qqmapsdk.geocoder({  // 腾讯地图sdk方法照着用
      address: adds,  //预览页详细地址展示
      success:res=> {
        if(res.status == 0){
          setTimeout(function () {
              wx.hideLoading()
           }, 500)

          let local = res.result.location;
          this.setData({
            latitude: lat,  //纬度
            longitude: lon  //经度
          })

        }
        
      }
    })
    // 使用微信内置地图查看位置
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success:res=> {
        wx.openLocation({
          longitude: JSON.parse(longitudeAndLatitude[0]),
          latitude: JSON.parse(longitudeAndLatitude[1]),
          scale: 13,
          name: '[位置]', //打开后显示的标题名称;
          address: adds //预览地图展示详细地址;
        })
      }
    })
  }
})