复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示。
图7.1 7.1节文件结构
在location.js中,封装“getLocation”接口,如下:
01wxJSSDK.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 &&
07locationApi.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
第7章 7.1节 位置操作接口08
09
10
11
12
13
14
15
16
17
18
19 input{
20 width: 100%;
21 padding: 0.2em;
22 background-color: #5eb95e;
23 font-size: 1.4em;
24 background-image: linear-gradient(to bottom, #62c462, #57a957);
25 background-repeat: repeat-x;
26 color: #ffffff;
27 text-align: center;
28 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
29 border-radius: 0.3em;
30 }
31 #info{
32 border-left: 3px solid#03a9f4;
33 background-color: #5eb95e;
34 color: #ffffff;
35 border-radius: 0.3em;
36 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
37 }
38
39
40
41
:)
42 位置操作接口!
43
44
纬度:无
45
经度:无
46
速度:无
47
位置精度:无
48
49
50
51
然后在location.js中增加响应事件,代码如下:
01window.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所示。
图7.2 微信JSSDK获取位置信息提示
图7.3 获取位置服务成功的信息
《微信公众平台网页开发实战——HTML5+JSSDK混合开发解密》
欢迎一起交流本书