作者:色系迷人_777 | 来源:互联网 | 2020-08-09 01:19
复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示。 图7.1 7.1节文件结构在location.js中,封装“getLocation”接口,如下: 01wxJSSDK.locationfunction(locationApi){02if(wxJSSDK.isReady){w
复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示。
图7.1 7.1节文件结构
在location.js中,封装“getLocation”接口,如下:
01 wxJSSDK.location = function(locationApi){
02 if(wxJSSDK.isReady){ //wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
03 if(locationApi){
04 locationApi.getLocation && wx.getLocation({ //获取地理位置接口
05 success: function (res) {
06 locationApi.getLocation.success &&
07 locationApi.getLocation.success(res);
08 }
09 });
10 }else{
11 console.log("缺少配置参数");
12 }
13 }else{
14 console.log("抱歉,wx没有初始化完毕,请等待wx初始化完毕,再调用位置接口服
15 务。");
16 }
17 }
在index.html文件中,增加“获取地理位置”按钮,以及显示获取之后的位置信息,代码结构,如下:
01
02
03
04
05
07
08
09
10
11
12
13
14
15
16
17
18
39
40
41 :)
42 位置操作接口!
43
44
纬度:无
45
经度:无
46
速度:无
47
位置精度:无
48
49
50
51
然后在location.js中增加响应事件,代码如下:
01 window.Onload= function(){
02 var latitude,longitude, speed ,accuracy; // 位置信息初始变量
03 $("#getLocation").click(function(){ // 获取地理位置接口
04 wxJSSDK.location({
05 getLocation:{
06 success:function (res) {
07 latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
08 $("#latitude").html(latitude);
09 lOngitude= res.longitude; // 经度,浮点数,范围为180 ~ -180。
10 $("#longitude").html(longitude);
11 speed = res.speed; // 速度,以米/每秒计
12 $("#speed").html(speed);
13 accuracy = res.accuracy; // 位置精度
14 $("#accuracy").html(accuracy);
15 }
16 }
17 });
18 });
19 }
最后记得在JSSDK的配置环境中加入“getLocation”API的权限。
【代码解释】
“getLocation”的位置成功后,会返回“纬度”、“经度”、“速度”、“位置精度”的相关信息。当点击“获取位置”的按钮之后,微信会弹出提示信息,如图7.2所示。获取位置服务成功之后的结果如图7.3所示。
以上就是利用JSSDK在网页中获取地理位置的详细内容,更多请关注 第一PHP社区 其它相关文章!