利用HTML5中Geolocation獲取地理位置調用Google Map API在Google Map上定位

2020-03-24 17:33:44

字體：大中小

來源：轉載

供稿：網友

HTML 利用HTML5中Geolocation獲取地理位置調用Google Map API在Google Map上定位
本小菜剛開始學習HTML5，現在對其中的Geolocation頗感興趣，結合Google Map的API實現基本的地圖定位功能。
1.獲取當前地理位置
調用方法 void getCurrentPosition(onSuccess, onError, options);即可。
其中onSuccess是獲取當前位置信息成功時執行的回調函數，onError是獲取當前位置信息失敗時所執行的回調函數，options是一些可選熟悉列表。其中第二和第三個參數為可選屬性。
在onSuccess回調函數中，用到了參數position，代表一個具體的position對象，表示當前位置。其具有如下屬性：
latitude：當前地理位置的緯度。
longitude：當前地理位置的經度。
altitude：當前位置的海拔高度（不能獲取時為null）。
accuracy：獲取到的緯度和經度的精度（以米為單位）。
altitudeAccurancy：獲取到的海拔高度的經度（以米為單位）。
heading：設備的前進方向。用面朝正被方向的順時針旋轉角度來表示（不能獲取時為null）。
speed：設備的前進速度（以米/秒為單位，不能獲取時為null）。
timestamp：獲取地理位置信息時的時間。

在onError回調函數中，用到了error參數。其具有如下屬性：
code：錯誤代碼，有如下值。
1.用戶拒絕了位置服務（屬性值為1）；
2.獲取不到位置信息（屬性值為2）；
3.獲取信息超時錯誤（屬性值為3）。
message：字符串，包含了具體的錯誤信息。

在options參數中，可選屬性如下：
enableHighAccuracy：是否要求高精度的地理位置信息。
timeout：設置超時時間（單位為毫秒）。
maximumAge：對地理位置信息進行緩存的有效時間（單位為毫秒）。
其中注意要寫上如下代碼，判斷瀏覽器是否支持HTML5獲取地理位置信息，以兼容較早不支持的瀏覽器。

復制代碼代碼如下:
if (navigator.geolocation) {
//獲取當前地理位置信息
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("你的瀏覽器不支持HTML5來獲取地理位置信息。");
}

2.調用Google Map API獲取當前位置信息
首先，需要在頁面中引用Google Map API的腳本文件，導入方法如下所示。

復制代碼代碼如下:
script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" /script

其次，設定地圖參數，設定方法如下所示。

復制代碼代碼如下:
//指定一個google地圖上的坐標點，同時指定該坐標點的橫坐標和縱坐標
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //設定放大倍數
center: latlng, //將地圖中心點設定為指定的坐標點
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地圖類型
};

最后，創建地圖，并在頁面中顯示，創建方法如下所示

復制代碼代碼如下:
//創建地圖，并在頁面map中顯示
var map = new google.maps.Map(document.getElementById("map"), myOptions);

最后的最后，獻上本次示例所有代碼。代碼如下所示。

復制代碼代碼如下:
!DOCTYPE html
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title 獲取當前位置并顯示在google地圖上 /title
script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" /script
script type="text/javascript"
function init() {
if (navigator.geolocation) {
//獲取當前地理位置
navigator.geolocation.getCurrentPosition(function (position) {
var coords = position.coords;
//console.log(position);
//指定一個google地圖上的坐標點，同時指定該坐標點的橫坐標和縱坐標
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //設定放大倍數
center: latlng, //將地圖中心點設定為指定的坐標點
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地圖類型
};
//創建地圖，并在頁面map中顯示
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//在地圖上創建標記
var marker = new google.maps.Marker({
position: latlng, //將前面設定的坐標標注出來
map: map //將該標注設置在剛才創建的map中
});
//標注提示窗口
var infoWindow = new google.maps.InfoWindow({
content: "當前位置： br/ 經度：" + latlng.lat() + " br/ 維度：" + latlng.lng() //提示窗體內的提示信息
});
//打開提示窗口
infoWindow.open(map, marker);
},
function (error) {
//處理錯誤
switch (error.code) {
case 1:
alert("位置服務被拒絕。");
break;
case 2:
alert("暫時獲取不到位置信息。");
break;
case 3:
alert("獲取信息超時。");
break;
default:
alert("未知錯誤。");
break;
}
});
} else {
alert("你的瀏覽器不支持HTML5來獲取地理位置信息。");
}
}
/script
/head
body onload="init()"
div id="map" /div
/body
/html
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML 表單

下一篇：語義化的HTML結構有哪些對于對網站的優化