微信公衆プラットフォームのホームページ開発実戦--3.JSDKを利用してWebページで地理的位置を取得(HTML 5+jQuery)
4101 ワード
JSDK環境をコピーし、indexを作成します.htmlファイル、構造を図7.1に示す.図7.1 7.1節ファイル構造はlocation.jsでは、次のように「getLocation」インタフェースをカプセル化します.
indexでhtmlファイルでは、「地理的位置の取得」ボタンを追加し、取得後の位置情報を表示します.コード構造は、次のとおりです.
そしてlocationでjsに イベントを します.コードは のとおりです.
にJSDKの に「getLocation」APIの を えることを えておいてください.【コード 】「getLocation」の が すると、「 」、「 」、「 」、「 」に する が されます.「 を 」ボタンをクリックすると、 7.2に すように、 はヒント をポップアップする.ロケーションサービスの に した を 7.3に す.
7.2 JSDK
7.3 サービス の
**「 プラットフォームウェブページ ——HTML 5+JSDK 」 の を **
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 ~ -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 }
にJSDKの に「getLocation」APIの を えることを えておいてください.【コード 】「getLocation」の が すると、「 」、「 」、「 」、「 」に する が されます.「 を 」ボタンをクリックすると、 7.2に すように、 はヒント をポップアップする.ロケーションサービスの に した を 7.3に す.
7.2 JSDK
7.3 サービス の
**「 プラットフォームウェブページ ——HTML 5+JSDK 」 の を **