微信小程式 定位 獲取經緯度城市街道等位置資訊
阿新 • • 發佈:2019-01-26
看文章 掃一掃 領紅包哦
可以看到:小程式只提供了一個獲取地理位置、速度的api,並沒有關於地位位置的資訊等,因此需要藉助一些第三方的api來實現。
實現方法一:百度地圖API
1.登入百度開放平臺http://lbsyun.baidu.com並申請AK,填寫相關資訊。
2.在專案根目錄下新建一個路徑,下載百度地圖微信小程式JavaScript API,解壓後得到 bmap-wx.js 檔案(解壓後有bmap-wx.js和bmap-wx.min.js兩種檔案,考慮到輕量化,建議用壓縮版的bmap-wx.min.js),將其拷貝到新建的路徑下,完成。
3.設定請求合法域名
登入微信公眾平臺-> "設定" -> "開發設定" -> "request 合法域名" ->新增 api.map.baidu.com -> 點選"儲存並提交",如圖所示:
開啟開發者工具 -> "專案" -> 點選"重新整理",合法域名設定同步完成。
4. 使用:
var app = getApp() // 引用百度地圖微信小程式JSAPI模組 換成你的檔案路徑 var bmap = require('../../utils/bmap-wx.min.js'); var wxMarkerData = []; //定位成功回撥物件 Page({ /** * 頁面的初始資料 */ data: { ak: "。。。", //填寫申請到的ak markers: [], //地圖示記 這裡暫沒用到 longitude: '', //經度 latitude: '', //緯度 address: '', //地址 business: {}, //商圈 desc:'' , //描述 }, onLoad: function (options) { console.log("定位"); var that = this; //新建百度地圖物件 var BMap = new bmap.BMapWX({ ak: that.data.ak }); var success = function(data){ console.log(data); wxMarkerData = data.wxMarkerData; that.setData({ markers:wxMarkerData, latitude: wxMarkerData[0].latitude, longitude:wxMarkerData[0].longitude, address:wxMarkerData[0].address, business: wxMarkerData[0].business, desc: wxMarkerData[0].desc, city: wxMarkerData[0].title, }); } var fail = function(data){ console.log(data); } BMap.regeocoding({ fail:fail, success:success }); }, })
<view class="jing">經度:{{latitude}}</view>
<view class="wei">緯度:{{longitude}}</view>
<view class="add">地址:{{address}}</view>
<view class="add">商圈:{{business}}</view>
<view class="add">描述:{{desc}}</view>
實現方法二:騰訊地圖API
- 申請開發者金鑰(key):申請密匙
- 安全域名設定,需要在微信公眾平臺新增域名地址https://apis.map.qq.com
- 示例
// 引入騰訊地圖SDK核心類 var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); var util = require("../../utils/util.js"); var qqmapsdk; Page({ data: { resData: [] }, onLoad: function (options) { // 例項化騰訊地圖API核心類 qqmapsdk = new QQMapWX({ key: 'HHHHH-BHJDJ-CZQPP-UN4IHS-QYOF2-MYFU3'//此處使用你自己申請的key }); }, onShow: function () { var that = this; // 騰訊地圖呼叫介面 qqmapsdk…({ }) } })