商城系統(tǒng) 注冊(cè)

小程序調(diào)用騰訊地圖如何實(shí)現(xiàn)

2020-09-27|HiShop
導(dǎo)讀：很多情況我們?cè)陂_(kāi)發(fā)小程序時(shí)，需要調(diào)用騰訊地圖的數(shù)據(jù)，來(lái)作為地圖導(dǎo)航。那么該如何實(shí)現(xiàn)？...

　　很多情況我們?cè)陂_(kāi)發(fā)小程序時(shí)，需要調(diào)用騰訊地圖的數(shù)據(jù)，來(lái)作為地圖導(dǎo)航。那么該如何實(shí)現(xiàn)？

小程序調(diào)用騰訊地圖如何實(shí)現(xiàn)

　　騰訊地圖提供了供小程序使用的SDK，可結(jié)合地圖組件和api進(jìn)行快速調(diào)用，訪(fǎng)問(wèn)地址為http://lbs.qq.com/qqmap_wx_jssdk/index.html。首次使用需要申請(qǐng)秘鑰，下載sdk文件qqmap-wx-jssdk.js。需要設(shè)置安全域名https://apis.map.qq.com

　　index.wxml文件如下

<view><text>經(jīng)度{{jd}}</text></view>
<view><text>緯度{{wd}}</text></view>
<view><text>地點(diǎn){{address}}</text></view>

　　index.js文件如下

varQQMapWX= require('../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 data:{
   },
 onLoad:function(options){
   qqmapsdk =newQQMapWX({
     key:'22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO'
   });
 },
 onReady:function(){
   var that=this
   wx.getLocation({
     type:'wgs84',
     success:function(res){
       console.log(res)
       var latitude1= res.latitude
       var longitude1= res.longitude
       qqmapsdk .reverseGeocoder({
           location:{
             latitude: latitude1,
             longitude: longitude1
           },
           success:function(res){
             console.log(res);
             var add= res.result.address
             that.setData({
               wd: latitude1,
               jd: longitude1,
               address: add
             })
           }
       });
     }

　　在這里調(diào)用了逆地理解析reverseGeocoder，對(duì)地理解析結(jié)果讀取獲取當(dāng)前位置。

　HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作，可視化編輯 1秒生成5步上線(xiàn)。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。

更多小程序開(kāi)發(fā)案例，盡在：http://westcoastpropertyservices.com/xiaocx/kaifa.html   
電話(huà)咨詢(xún) 預(yù)約演示 0元開(kāi)店