HTML5 ガイド-7. 地理位置情報と Google マップを組み合わせて、小さな application_html5 チュートリアルのスキルを開発します。

今日は、HTML5 地理位置情報と Google マップを組み合わせた小さなアプリケーションを開発します。 Google マップ API アドレス: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN。
Google マップを呼び出すには、JS 参照を追加する必要があります


InitMap メソッドは、マップを初期化するために Google マップ API を呼び出します。オプション オブジェクトを設定する必要があります。マップの初期化を呼び出すときにそれを使用します。

コードをコピーします

コードは次のとおりです。 function InitMap() {

/ * 地図のすべてのオプションを設定します */

var options = {

zoom: 4,
center: new google.maps.LatLng(38.6201, -90.2003),
mapTypeId : google.maps.MapTypeId.ROADMAP、
mapTypeControl: true、
mapTypeControlOptions: {
スタイル: google.maps.MapTypeControlStyle.HORIZONTAL_BAR、
位置: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps .ZoomControlStyle.LARGE、
位置: google.maps.ControlPosition.LEFT_CENTER
}、
scaleControl: true、
scaleControlOptions: {
位置: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
/* の新しいマップを作成します。 application */
map = new google.maps.Map($('#map')[0], options);
}


getLocation メソッドと watchLocation メソッドは位置情報を取得します。

コードをコピー

コードは次のとおりです。 function getLocation() { / * ブラウザが W3C Geolocation API をサポートしているかどうかを確認します */

if (navigator.geolocation) {

browserSupport = true;

navigator.geolocation.getCurrentPosition(plotLocation, report問題, { timeout: 45000 } );
} else {
report問題();
}
}
function watchLocation() {
/* ブラウザが W3C Geolocation API をサポートしているかどうかを確認します */
if (navigator .geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition(plotLocation, report問題, { タイムアウト: 45000 }); else {
report問題(); }
}


位置情報の取得に成功したら、plotLocation メソッドを呼び出して、Google マップに位置を表示します。

コードをコピーします

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

function putLocation(position) {
試行 = 0;
var point = new google.maps.LatLng(position.coords.latitude, Position.coords.longitude);
var marker = new google.maps.Marker({
位置: ポイント
});
map.setCenter(point);


デモ ダウンロード アドレス:
googleMapGeolocation.rar