小程序模板網(wǎng)

微信小程序定位--獲取經(jīng)緯度城市街道等位置信息

發(fā)布時(shí)間：2017-12-16 15:05 所屬欄目：小程序開發(fā)教程

請先看微信小程序關(guān)于定位的API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject可以看到：小程序 ...

 
 
 

請先看微信小程序關(guān)于定位的API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject

可以看到：小程序只提供了一個(gè)獲取地理位置、速度的api，并沒有關(guān)于地位位置的信息等，因此需要借助一些第三方的api來實(shí)現(xiàn)。

實(shí)現(xiàn)方法一：百度地圖API

1.登錄百度開放平臺http://lbsyun.baidu.com并申請AK，填寫相關(guān)信息。

 

2.在項(xiàng)目根目錄下新建一個(gè)路徑，下載百度地圖微信小程序JavaScript API，解壓后得到 bmap-wx.js 文件（解壓后有bmap-wx.js和bmap-wx.min.js兩種文件，考慮到輕量化，建議用壓縮版的bmap-wx.min.js），將其拷貝到新建的路徑下，完成。

 

3.設(shè)置請求合法域名

登錄微信公眾平臺－> "設(shè)置" －> "開發(fā)設(shè)置" －> "request 合法域名" －>添加 api.map.baidu.com －> 點(diǎn)擊"保存并提交"，如圖所示：

 

打開開發(fā)者工具 －> "項(xiàng)目" －> 點(diǎn)擊"刷新"，合法域名設(shè)置同步完成。

 

4. 使用：

 

[javascript] view plain copy
 
  1. var app = getApp()  
  2. // 引用百度地圖微信小程序JSAPI模塊   
  3. var bmap = require('../../utils/bmap-wx.js');   
  4. var wxMarkerData = [];  //定位成功回調(diào)對象    
  5. Page({  
  6.   /** 
  7.    * 頁面的初始數(shù)據(jù) 
  8.    */  
  9.   data: {  
  10.     ak: "。。。", //填寫申請到的ak    
  11.     markers: [],     //地圖標(biāo)記  
  12.     longitude: '',   //經(jīng)度    
  13.     latitude: '',    //緯度    
  14.     address: '',     //地址    
  15.     business: {},    //商圈   
  16.     desc:'' ,        //描述  
  17.   },  
  18.  onLoad: function (options) {  
  19.     console.log("定位");  
  20.     var that = this;  
  21.     //新建百度地圖對象  
  22.     var BMap = new bmap.BMapWX({  
  23.       ak: that.data.ak  
  24.     });  
  25.     var success = function(data){  
  26.       console.log(data);  
  27.       wxMarkerData = data.wxMarkerData;  
  28.       that.setData({  
  29.         markers:wxMarkerData,  
  30.         latitude: wxMarkerData[0].latitude,  
  31.         longitude:wxMarkerData[0].longitude,  
  32.         address:wxMarkerData[0].address,  
  33.         business: wxMarkerData[0].business,  
  34.         desc: wxMarkerData[0].desc,  
  35.         city: wxMarkerData[0].title,  
  36.       });  
  37.     }  
  38.     var fail = function(data){  
  39.       console.log(data);  
  40.     }  
  41.     BMap.regeocoding({  
  42.       fail:fail,  
  43.       success:success  
  44.     });  
  45.   },  
  46. })  

[html] view plain copy
 
  1. <view class="jing">經(jīng)度：{{latitude}}</view>  
  2. <view class="wei">緯度：{{longitude}}</view>  
  3. <view class="add">地址：{{address}}</view>  
  4. <view class="add">商圈：{{business}}</view>  
  5. <view class="add">描述：{{desc}}</view>  

 

實(shí)現(xiàn)方法二：騰訊地圖API

 

  1. 申請開發(fā)者密鑰（key）：申請密匙
  2. 下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
  3. 安全域名設(shè)置，需要在微信公眾平臺添加域名地址https://apis.map.qq.com
  4. 示例 
    [javascript] view plain copy
     
    1. // 引入騰訊地圖SDK核心類  
    2. var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');  
    3. var util = require("../../utils/util.js");  
    4. var qqmapsdk;  
    5. Page({  
    6. 　data: {  
    7. 　　resData: []  
    8. 　},  
    9. 　onLoad: function (options) {  
    10. 　　// 實(shí)例化騰訊地圖API核心類  
    11. 　　qqmapsdk = new QQMapWX({  
    12. 　　　key: 'HHHHH-BHJDJ-CZQPP-UN4IHS-QYOF2-MYFU3'//此處使用你自己申請的key  
    13. 　　});  
    14. 　},  
    15. 　onShow: function () {  
    16. 　　var that = this;  
    17. 　　// 騰訊地圖調(diào)用接口  
    18. 　　qqmapsdk…({  
    19. 　　　　　  
    20. 　　})  
    21. 　}  
    22. })  
    23.  


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.u-renovate.com/wxmini/doc/course/18187.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×