HTML5 で Geolocation を使用して地理的位置を取得し、Google Map API を呼び出して位置を特定します。Google Map_html5 チュートリアルのスキル

このおかずは、HTML5 を学習し始めたばかりですが、地理位置情報に非常に興味を持っており、Google マップの API と組み合わせて、基本的な地図位置機能を実現しました。
1. 現在の地理的位置を取得します。
メソッド void getCurrentPosition(onSuccess, onError, options); を呼び出します。
このうち、onSuccessは現在位置情報の取得に成功した場合に実行されるコールバック関数、onErrorは現在位置情報の取得に失敗した場合に実行されるコールバック関数、optionsはおなじみのオプションのリストです。 2 番目と 3 番目のパラメータはオプションの属性です。
onSuccess コールバック関数では、パラメータposition が使用されます。これは、特定の位置オブジェクトを表し、現在位置を表します。これには次の属性があります:
•緯度: 現在の地理的位置の緯度。
•経度: 現在の地理的位置の経度。
•altitude: 現在位置の高度(取得できない場合はnull)。
•精度: 取得された緯度と経度の精度 (メートル単位)。
•altitudeAccuracy: 取得された高度の経度 (メートル単位)。
•見出し: デバイスの順方向。オブジェクトの方向に対して時計回りの回転角度で表されます(取得できない場合はnull)。
•speed: デバイスの前進速度 (メートル/秒単位、取得できない場合は null)。
•timestamp: 地理的位置情報を取得した時刻。

onError コールバック関数では、error パラメーターが使用されます。これには次の属性があります:
•code: 次の値を持つエラー コード。
1. ユーザーが位置情報サービスを拒否しました (属性値は 1)。
2. 位置情報を取得できませんでした (属性値は 3)。 ）。
•message: 特定のエラー情報を含む文字列。

options パラメータのオプション属性は次のとおりです。
•enableHighAccuracy: 高精度の地理的位置情報を要求するかどうか。
•timeout：タイムアウト（単位：ミリ秒）を設定します。
•maximumAge: 地理的位置情報をキャッシュする有効時間 (単位: ミリ秒)。
地理的位置情報を取得するためにブラウザが HTML5 をサポートしているかどうかを判断するには、HTML5 をサポートしていない以前のブラウザと互換性を持たせるために必ず次のコードを記述してください。

コードをコピーコードは次のとおりです:

if (navigator.geolocation) {
//現在の地理的位置情報を取得します
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("お使いのブラウザは地理的位置の取得に HTML5 をサポートしていません情報。" ; 以下に示すように。

コードをコピー

コードは次のとおりです:

次に、マップ パラメータを設定し、設定方法は以下の通りです。

コードをコピー

コードは次のとおりです:

// 座標を指定しますGoogle マップのポイント、座標ポイントの横座標と縦座標を同時に指定します。 var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); var myOptions = { zoom : 14, / /拡大率を設定しますcenter: latlng, //地図の中心点を指定された座標点に設定します

mapTypeId: google.maps.MapTypeId.ROADMAP //地図の種類を指定します

} ;

最後にマップを作成してページに表示します。作成方法は次のとおりです


コードをコピーします。 >

コードは次のとおりです:

//マップを作成し、ページに表示します。マップ
var map = new google.maps.Map(document.getElementById ("map"), myOptions);

最後に、この例のすべてのコードを示します。コードを以下に示します。

コードをコピーします

コードは次のとおりです:

<メタhttp-equiv="Content-Type" content="text/html; charset=utf-8" />
;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">