本小菜剛開始學習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);
- 擷取不到位置資訊(屬性值為2);
- 擷取資訊逾時錯誤(屬性值為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>
其次,設定地圖參數,設定方法如下所示。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
//指定一個google地圖上的坐标點,同時指定該坐标點的橫坐标和縱坐标
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //設定放大倍數
center: latlng, //将地圖中心點設定為指定的坐标點
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地圖類型
};
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
最後,建立地圖,并在頁面中顯示,建立方法如下所示。
//建立地圖,并在頁面map中顯示
var map = new google.maps.Map(document.getElementById("map"), myOptions);
最後的最後,獻上本次示例所有代碼。代碼如下所示。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
<!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" style="width: 800px; height: 600px"></div>
</body>
</html>