JSSDK를 사용하여 웹페이지에서 지리적 위치 가져오기
- 巴扎黑원래의
- 2017-06-23 14:00:553854검색
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 파일에 "Get Location"을 추가합니다. 버튼을 클릭하고 획득한 위치 정보를 표시하면 코드 구조는 다음과 같습니다.
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <metacharset="UTF-8">
05 <meta name="viewport" content="width=device-width,initial-scale=1.0,
06 minimum-scale=1, maximum-scale=1.0,user-scalable=no">
07 <title>第7章 7.1节 位置操作接口</title>
08 <!--依赖文件：jQuery-->
09 <script src="./js/jquery-1.11.2.min.js?1.1.10"></script>
10 <!--依赖文件：微信的JSSDK源文件-->
11 <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?1.1.10"></script>
12 <!--依赖文件：coolie-->
13 <script src="./js/cookie.js?1.1.10"></script>
14 <!--JSSDK的环境-->
15 <script src="./js/wxJSSDK.js?1.1.10"></script>
16 <!--引入检测API的位置服务-->
17 <script src="location.js?1.1.10"></script>
18 <style>
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 </style>
39 </head>
40 <body>
41 <h1 style="font-size: 8em">:)</h1>
42 <b style="font-size: 3em">位置操作接口！</b><br/><br />
43 <div id="info">
44 <p>纬度：<em id="latitude">无</em></p>
45 <p>经度：<em id="longitude">无</em></p>
46 <p>速度：<em id="speed">无</em></p>
47 <p>位置精度：<em id="accuracy">无</em></p>
48 </div>
49 <input type="button" value="获取当前地理位置信息" id="getLocation" />
50 </body>
51 </html>
그런 다음 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" 위치 확인에 성공하면 "위도", "경도", "속도", "위치 정확도" 관련 정보가 반환됩니다. "위치 가져오기" 버튼을 클릭하면 WeChat은 그림 7.2와 같이 프롬프트 메시지를 표시합니다. 위치 서비스 획득에 성공한 결과는 그림 7.3과 같다.
그림 7.2 위치 정보를 얻기 위한 WeChat JSSDK 프롬프트
그림 7.3 위치 서비스 성공 정보 얻기
"WeChat 공개 플랫폼 웹 개발 사례 - HTML5+JSSDK 혼합 개발 암호 해독"
이 책을 함께 교환해 주셔서 감사합니다
위 내용은 JSSDK를 사용하여 웹페이지에서 지리적 위치 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.