點(diǎn)此查看 微信公眾號(hào)/微信網(wǎng)頁(yè)/微信支付/企業(yè)微信/小程序開(kāi)發(fā)合集及源代碼下載

本文目錄

• 1. 背景
• 2. 代碼
• 3. 測(cè)試

1. 背景

微信網(wǎng)頁(yè)提供了獲取當(dāng)前地理位置經(jīng)緯度，以及通過(guò)內(nèi)置地圖查看當(dāng)前位置的接口。

官方接口說(shuō)明如下：

// 獲取位置 wx.getLocation({type: 'wgs84', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'success: function (res) {var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。var speed = res.speed; // 速度，以米/每秒計(jì)var accuracy = res.accuracy; // 位置精度} }); // 查看位置 wx.openLocation({latitude: 0, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90longitude: 0, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。name: '', // 位置名address: '', // 地址詳情說(shuō)明scale: 1, // 地圖縮放級(jí)別,整型值,范圍從1~28。默認(rèn)為最大infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn) });

2. 代碼

編寫完整代碼如下：

<input type="button" value="查看位置" onclick="openLocation()"> |<input type="button" value="獲取位置" onclick="getLocation()"> |<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script>var apiList = [ 'checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'networkTest', 'openLocation', 'getLocation' ];$(function() {// 向后端請(qǐng)求配置信息$.ajax({type : "GET",url : "/wx-server/wxJsapiSignature",data : {url : location.href.split('#')[0]},dataType : "json",success : function(res) {configInfo(res);}});});// 通過(guò)wx.config注入配置信息function configInfo(res) {wx.config({debug : false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。appId : res.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)timestamp : res.timestamp, // 必填，生成簽名的時(shí)間戳nonceStr : res.nonceStr, // 必填，生成簽名的隨機(jī)串signature : res.signature,// 必填，簽名jsApiList : apiList// 必填，需要使用的JS接口列表});// 處理成功后回調(diào)wx.ready(function() {console.log("處理成功:");wx.checkJsApi({jsApiList : apiList,success : function(checkRes) {console.log("checkRes:", checkRes);}});});// 處理失敗后回調(diào)wx.error(function(err) {console.log("處理失敗:", err);});}// 查看位置function openLocation() {wx.openLocation({latitude : 36, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90longitude : 117, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。name : '', // 位置名address : '', // 地址詳情說(shuō)明scale : 10, // 地圖縮放級(jí)別,整型值,范圍從1~28。默認(rèn)為最大infoUrl : '' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)});}// 獲取位置function getLocation() {wx.getLocation({type : 'wgs84', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'success : function(res) {console.log(res);var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。}});}</script>

3. 測(cè)試

通過(guò)微信開(kāi)發(fā)者工具，點(diǎn)擊【獲取位置】，輸出如下：

使用微信打開(kāi)對(duì)應(yīng)網(wǎng)址，點(diǎn)擊【查看位置】，效果如下。注意此時(shí)使用開(kāi)發(fā)者工具無(wú)法彈出內(nèi)置地圖，需要使用微信客戶端。

總結(jié)

以上是生活随笔為你收集整理的微信网页开发(8)--地理位置接口的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。