【原创】微信公众号与HTML 5混合模式揭秘--JSSDK获取地理位置_html/css_WEB-ITnose
程序员文章站
2022-05-25 14:59:31
...
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
JSSDK为开发者提供了两个位置API服务:获取地理位置和使用微信内置地图查看位置。
下面还是沿用以往的实战演示方法。先创建一份location.js文件,为“wxJSSDK”增加“location”的相关API,代码如下:
01 wxJSSDK.location= function(locationApi){02 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕03 if(locationApi){04 //其他代码略05 }else{06 console.log("缺少配置参数");07 }08 }else{09 console.log("抱歉,wx没有初始化完毕,请等待wx初始化完毕,再调用位置接口服10 务。");11 }12 }
复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示。
图7.1 7.1节文件结构
7.1.1 获取地理位置
第1个就是“获取地理位置”的信息,名为“getLocation”,官方示例代码:
01 wx.getLocation({02 success: function (res) {//1个参数,位置资源信息03 var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -9004 var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。05 var speed = res.speed; // 速度,以米/每秒计06 var accuracy = res.accuracy; // 位置精度07 }08 });在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 0203 04 05 07 第7章 7.1节位置操作接口 08 0910 11 12 13 14 15 16 17 18 39 40 41 :)
42 位置操作接口!
434449 50 51纬度:无
45经度:无
46速度:无
47位置精度:无
48
上一篇: 【求指点】自学与新浪微博开放平台对接,运行新浪提供的SDK报错
下一篇: PHP干排行榜功能,求思路
推荐阅读
-
微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose
-
微信公众号与HTML 5混合模式揭秘1--如何部署JSSDK_html/css_WEB-ITnose
-
【原创】微信公众号与HTML 5混合模式揭秘--JSSDK获取地理位置_html/css_WEB-ITnose
-
微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose
-
微信公众号与HTML 5混合模式揭秘1--如何部署JSSDK_html/css_WEB-ITnose
-
【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose
-
【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose