recherche

Maison  >  Article  >  interface Web  >  Utilisez JSSDK pour obtenir la localisation géographique à partir de pages Web

Utilisez JSSDK pour obtenir la localisation géographique à partir de pages Web

巴扎黑
巴扎黑original
2017-06-23 14:00:553786parcourir

Copiez une copie de l'environnement JSSDK et créez un fichier index.html avec la structure indiquée dans la figure 7.1.

Figure 7.1 Section 7.1 Structure du fichier

Dans location.js, encapsulez l'interface "getLocation" comme suit : 

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	}

Dans le fichier index.html, ajoutez un bouton "Obtenir la localisation géographique" et affichez les informations de localisation après acquisition. La structure du code est la suivante : 

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>
　

Puis ajoutez l'événement de réponse dans location.js, le code est le suivant : 

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	}
　

Enfin, n'oubliez pas d'ajouter les autorisations API « getLocation » à l'environnement de configuration JSSDK.

[Explication du code]

Une fois la localisation de « getLocation » réussie, les informations pertinentes de « latitude », « longitude », « vitesse » et « précision de localisation » seront renvoyées. Après avoir cliqué sur le bouton « Obtenir l'emplacement », WeChat affichera un message d'invite, comme le montre la figure 7.2. Le résultat après avoir obtenu avec succès le service de localisation est présenté dans la figure 7.3.

Figure 7.2 Invite WeChat JSSDK pour obtenir des informations de localisation

Figure 7.3 Informations sur l'acquisition réussie d'un service de localisation

"Développement Web pratique de la plateforme publique WeChat - Décryptage du développement hybride HTML5+JSSDK"

Bienvenue pour échanger ce livre ensemble

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Déplacer la base de données du serveur vers le navigateur - encapsulation des opérations de base indexedDBArticle suivant：Déplacer la base de données du serveur vers le navigateur - encapsulation des opérations de base indexedDB

Articles Liés

Voir plus