zoukankan      html  css  js  c++  java
  • 微信小程序 使用腾讯地图SDK详解及实现步骤

    信小程序 使用腾讯地图SDK详解及实现步骤

       微信小程序JavaScript SDK:

      官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html

    步骤:

       1.申请开发者密钥(key):申请密匙

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

       3.安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com  

        4.小程序示例

        /**
        * 获取当前坐标 
        */
        wx.getLocation({
          success: function (res) {
            self.setData({
              hasLocation: true,
            })
            showAddress(res.longitude, res.latitude, self);
          },
          cancel: function (res) {
            alert('对不起,请允许获取您的地理位置');
            wx.closeWindow();
          },
          fail: function (res) {
            alert('系统检测到微信没有获取位置权限,请先开启再来哦')
          }
        })
    
    //经纬度解析
     function showAddress(longitude, latitude, self) {
          // 实例化腾讯地图API核心类  
          qqmapsdk = new QQMapWX({
            key: 'DPEBZ-SXF6X-IDK45-7O6JH-LJZZE-KIB42'//此处使用你自己申请的key  
          });
          // 腾讯地图调用接口  
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success: function (res) {
              self.setData({
                address: res.result.address
              })
            },
            fail: function (res) {
              console.log(res);
            },
            complete: function (res) {
            }
          });
        }
      },

    结果效果图:

  • 相关阅读:
    struts2<s:property />标签
    struts2值栈分析
    Java编程 “提高性能” 应尽力做到
    java中Set类接口的用法
    oc-可变数组继承不可变数组
    oc-数组内元素排序
    oc-数组遍历
    oc-创建数组
    oc-字典应用
    oc-数组应用及相关练习
  • 原文地址:https://www.cnblogs.com/joe-tang/p/8058137.html
Copyright © 2011-2022 走看看