HTML5 geolocation和BaiduMap、BingMap、GoogleMap

 HTML5的地理位置定位感覺是很cool的能力，我們公司原先的定位是在android上完成的，現在我來嘗試下使用HTML5的geolocation來做些事情看看。

<a target="_blank" href="http://blog.51cto.com/attachment/201205/162315637.gif"></a>

HTML5的地理定位的采集方式：1. IP位址，2. GPS定位，3. MAC位址，4. GSM基站網絡，5. 使用者定義的位址位

老規矩，先簡單的嘗試下geolocationAPI應用

先HTML的代碼，那是相當簡單

[html] view plaincopy 

&lt;body&gt;  

&lt;input type="button" value="get Geo" /&gt;  

&lt;/body&gt; 

javaScript的代碼如下 

[javascript] view plaincopy 

$(  

function() {  

$(":button").click(  

navigator.geolocation.getCurrentPosition(  

function(e) { //成功回調  

$.log(e.coords.accuracy); //準确度  

$.log(e.coords.latitude); //緯度  

$.log(e.coords.longitude); //經度  

$.log(e.coords.altitude); //海拔高度  

$.log(e.coords.altitudeAccuracy); //海拔高度的精确度  

$.log(e.coords.heading); //行進方向  

$.log(e.coords.speed); //地面的速度  

$.log(new Date(e.timestamp).toLocaleDateString());//采集日期  

$.log(new Date(e.timestamp).toLocaleTimeString());//采集時間  

},  

function(e) { //失敗回調  

$.log(e.message); //錯誤資訊  

$.log(e.code); //錯誤代碼  

{//可選參數 JSON格式  

"enableHighAcuracy": false, //是否啟用高精确度模  

"timeout": 100, //在指定的時間内擷取位置資訊  

"maximumAge": 0//浏覽器重新擷取位置資訊的時間間隔  

}  

);  

); 

現在你點選按鈕，就可以在控制台看到經緯度和采樣日期時間了。

那獲得了經緯度的值，必然首先要做的就是地圖定位了，現在主流的地圖服務我知道的有：baidu，google，和bing，下面我來測試我們得到的經緯度在這三個地圖服務中取得的地圖圖像吧。

baidu和bing我都查了官方的sample，但是，但是，我要狠狠的批評google，我用chrome浏覽器通路googleMapApi中的sample，竟然chrome告訴我“由于 google-developers.appspot.com 響應時間過長，導緻“Google Chrome 浏覽器”無法加載網頁。該網站可能已崩潰，或者您的網際網路連接配接出現了問題。”google，你看着辦吧。

先看看我們的body

&lt;div&gt;  

&lt;/div&gt;  

&lt;div id="baiduMap" style="width: 300px; height: 300px; float: left;"&gt;  

&lt;div id="googleMap" style="width: 300px; height: 300px; float: left;"&gt;  

&lt;div id="bingMap" style="width: 300px; height: 300px; float: left; position: relative;"&gt;  

然後引入三家的服務腳本

&lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"&gt;&lt;/script&gt;  

&lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;  

&lt;script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&amp;mkt=en-us"&gt;&lt;/script&gt; 

以下是測試代碼

$.log = function(msg) {  

console.log(msg);  

$.log(new Date(e.timestamp).toLocaleDateString()); //采集日期  

$.log(new Date(e.timestamp).toLocaleTimeString()); //采集時間  

createBaiduMap(e.coords.longitude, e.coords.latitude);  

createBingMap(e.coords.longitude, e.coords.latitude);  

createGoogleMap(e.coords.longitude, e.coords.latitude);  

enableHighAcuracy: false, //是否啟用高精确度模  

timeout: 100, //在指定的時間内擷取位置資訊  

maximumAge: 0//浏覽器重新擷取位置資訊的時間間隔  

function createBaiduMap(longitude, latitude) {  

var map = new BMap.Map("baiduMap");  

var point = new BMap.Point(longitude, latitude);  

map.centerAndZoom(point, 15);  

function createGoogleMap(longitude, latitude) {  

var map = new google.maps.Map(document.getElementById("googleMap"),  

{  

center: new google.maps.LatLng(latitude, longitude),  

zoom: 14,  

mapTypeId: google.maps.MapTypeId.ROADMAP,  

mapTypeControl: false,  

navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }  

function createBingMap(longitude, latitude) {  

var map = new VEMap("bingMap");  

var LA = new VELatLong(latitude, longitude);  

map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);  

} 

基本代碼完成後，我們看到googleMap（以後簡稱gm）和bingMap（以後簡稱mm）預設有縮放都控制器，baiduMpa（以後簡稱bm）沒有帶，現在為bm加上控制器

map.addControl(new BMap.NavigationControl());  

為bm添加了一個NavigationControl就可以看到效果了。

現在我們想在地圖上做一個标注，把我們給點的經緯度标注出來，同時我們也看看地圖服務商和HTML5的定位是不是比較準，三個地圖服務商的加标注代碼如下

var marker = new BMap.Marker(point); //标注  

marker.setLabel(new BMap.Label("我在這裡"));  

map.addOverlay(marker);  

var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude),  

map: map,  

title: "我在這裡" });  

map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); //圖釘  

var myPolygon = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude, 0, VEAltitudeMode.Default));  

map.AddShape(myPolygon);  

myPolygon.SetTitle("我在這裡");  

如果我在移動裝置上進行采集資料的話，geo提供了一個異步的API：watchPosition，這個api是異步的，文檔上說：當檢測到裝置的位置發生改變時，它傳回裝置的目前位置。當裝置檢索到一個新的位置，會觸發geolocationSuccess回調函數并傳遞一個Position對象作為參數。如果發生錯誤，會觸發geolocationError回調函數并傳遞一個PositionError對象。不過具體我還沒有測試

代碼和getCurrentPosition很像的

navigator.geolocation.watchPosition(  

timeout: 10, //在指定的時間内擷取位置資訊  

maximumAge: 10, //浏覽器重新擷取位置資訊的時間間隔  

frequency: 1000//每隔3秒鐘檢索一次位置資訊  

要停止這個輪詢，隻要用navigator.geolocation.clearWatch就可以了。

本文轉自shyleoking 51CTO部落格，原文連結:http://blog.51cto.com/shyleoking/863993