ホームページ > 記事 > ウェブフロントエンド > HTML5 ガイド-7. 地理位置情報と Google マップを組み合わせて、小さな application_html5 チュートリアルのスキルを開発します。
HTML5 ガイド-7. 地理位置情報と Google マップを組み合わせて、小さな application_html5 チュートリアルのスキルを開発します。
- WBOYオリジナル
- 2016-05-16 15:50:221739ブラウズ
今日は、HTML5 地理位置情報と Google マップを組み合わせた小さなアプリケーションを開発します。 Google マップ API アドレス: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN。
Google マップを呼び出すには、JS 参照を追加する必要があります
InitMap メソッドは、マップを初期化するために Google マップ API を呼び出します。オプション オブジェクトを設定する必要があります。マップの初期化を呼び出すときにそれを使用します。
コードをコピーします
コードは次のとおりです。 function InitMap() {
/ * 地図のすべてのオプションを設定します */ 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 メソッドは位置情報を取得します。
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) { 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
} 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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。