微信公众号点击打开地图导航

html 复制代码
<h3 id="menu-location">地理位置接口</h3>
 <span class="desc">使用微信内置地图查看位置接口</span>
 <button class="btn btn_primary" id="openLocation">openLocation</button>
<span class="desc">获取地理位置接口</span>
      <button class="btn btn_primary" id="getLocation">getLocation</button>
       
<script>
//这里的配置详细可以看帮助
wx.config({
      debug: false,
      appId: 'wxf8b4f85f3a794e77',
      timestamp: 1522828107,
      nonceStr: 'jnShs2vgPDo6fwlY',
      signature: '1432d01387adacbca1ce0a4d6ecf3f62363e0309',
      jsApiList: [
      // 所有要调用的 API 都要加到这个列表中        
        'openLocation',
        'getLocation',    
]
  });
  wx.ready(function () {
    // 在这里调用 API
     // 7 地理位置接口
  // 7.1 查看地理位置
  document.querySelector('#openLocation').onclick = function () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'TIT 创意园',
      address: '广州市海珠区新港中路 397 号',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };
  // 7.2 获取当前地理位置
  document.querySelector('#getLocation').onclick = function () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('用户拒绝授权获取地理位置');
      }
    });
  };
  });
</script>
相关推荐
●VON5 分钟前
React Native for OpenHarmony:项目目录结构与跨平台构建流程详解
javascript·学习·react native·react.js·架构·跨平台·von
m0_686041616 分钟前
C++中的适配器模式变体
开发语言·c++·算法
清风~徐~来10 分钟前
【视频点播系统】WebSocketpp 介绍及使用
开发语言
爱吃大芒果22 分钟前
Flutter for OpenHarmony 实战:mango_shop 路由系统的配置与页面跳转逻辑
开发语言·javascript·flutter
学***542324 分钟前
如何轻松避免网络负载过大
开发语言·网络·php
qq_1777673726 分钟前
React Native鸿蒙跨平台实现消息列表用于存储所有消息数据,筛选状态用于控制消息筛选结果
javascript·react native·react.js·ecmascript·harmonyos
RANCE_atttackkk28 分钟前
Springboot+langchain4j的RAG检索增强生成
java·开发语言·spring boot·后端·spring·ai·ai编程
梵刹古音31 分钟前
【C语言】 格式控制符与输入输出函数
c语言·开发语言·嵌入式
Acrelhuang37 分钟前
工商业用电成本高?安科瑞液冷储能一体机一站式解供能难题-安科瑞黄安南
大数据·开发语言·人工智能·物联网·安全
hello 早上好38 分钟前
03_JVM(Java Virtual Machine)的生命周期
java·开发语言·jvm