微信公众号与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 02 03 04 05 07 第7章 7.1节位置操作接口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 ~ -9008 $(#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 获取位置服务成功的信息
摘自
微信公众号与html 5混合模式揭秘1——如何部署jssdk  微信公众号与html 5混合模式揭秘2——分享手机相册中照片