之前研究過一段時間的定位
當時沒學過html,javascript,也不懂背後的原理
只知道用一些軟件，比如說trape等等
現在學了google地圖後，可以藉助 navigator.geolocation來獲取位置信息並呈現在google地圖上
下面先做一個簡單的測試,首先是低精度請求
在這種情況下navigator.geolocation基於IP定位或 Wi-Fi 定位,這裏我開了代理…所以顯示我在臺灣
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
<script>
function initialize()
{
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var yourmap = {
center:new google.maps.LatLng(latitude ,longitude),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(latitude ,longitude),
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"我在這裏!"
});
infowindow.open(map,marker);
};
function error() {
alert('地理位置不可用');
};
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(success, error);
} else
{
alert('地理位置不可用');
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
重點關注函數部分
function initialize()
{
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var yourmap = {
center:new google.maps.LatLng(latitude ,longitude),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(latitude ,longitude),
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"我在這裏!"
});
infowindow.open(map,marker);
};
function error() {
alert('地理位置不可用');
};
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(success, error);
} else
{
alert('地理位置不可用');
}
};
sucess是我們主要的獲取位置的函數,傳入的參數是位置信息
function success(position) {
var latitude = position.coords.latitude;//保留精度和緯度
var longitude = position.coords.longitude;
var yourmap = {
center:new google.maps.LatLng(latitude ,longitude),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};//根據我們獲取到的地理位置確定地圖中心
var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);//老熟人了..生成地圖
var marker=new google.maps.Marker({
position:new google.maps.LatLng(latitude ,longitude)
});//生成我們的標記，位置是在返回的定位
marker.setMap(map);//老熟人
var infowindow = new google.maps.InfoWindow({
content:"我在這裏!"
});//消息窗口，內容是我在這裏
infowindow.open(map,marker);//長在上面
};
好像也沒那麼複雜
接下來是個返回結果失敗的函數處理
function error() {
alert('地理位置不可用');
};
接下來這個就比較關鍵了，是我們獲取地理位置的原函數
首先是個 if的判斷語句
如果地理信息存在，我們將執行查詢的函數，否則返回不可用
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(success, error);
} else
{
alert('地理位置不可用');
}
這個函數是geolocation裏面的精髓
navigator.geolocation.getCurrentPosition(success, error);
獲取用戶當前定位位置
異步地請求獲取用戶位置，並查詢定位硬件來獲取最新信息。當定位被確定後，定義的第一個回調函數(success)就會被執行。您可以選擇性地提供第二個回調函數，當有錯誤時會被執行(錯誤處理函數)。第三個參數也是可選的，您可以通過該對象參數設定最長可接受的定位返回時間、等待請求的時間和是否獲取高精度定位
默認情況下，getCurrentPosition() 會盡快返回一個低精度結果，這在您不關心準確度只關心快速獲取結果的情況下很有用。有 GPS 的設備可能需要一分鐘或更久來獲取 GPS 定位，在這種情況下 getCurrentPosition() 會返回低精度數據（基於 IP 的定位或 Wi-Fi 定位）,就是我們這次測試基於的就是ip定位
所有的函數都在initliaze裏面定義好，然後通過一個 google.maps.event.addDomListener(window, ‘load’, initialize);在初始化的時候調用，整體上來說思路還是比較清晰的,希望大家可以喜歡
忘記說了…現在獲取地理信息一定要先針得用戶的同意，比如說在firefox裏會彈出，是否允許獲取當前位置信息，只有確定了纔會get到，當然別人同不同意就看你的本事啦