HTML5的地理位置定位感覺是很cool的能力，我們公司原先的定位是在android上完成的，現在我來嘗試下使用HTML5的geolocation來做些事情看看。
HTML5的地理定位的採集方式：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站網路，5. 使用者定義的地址位
老規矩，先簡單的嘗試下geolocationAPI應用
先HTML的代碼，那是相當簡單
<body> <input type="button" value="get Geo" /></body>
javaScript的代碼如下
$(function() { $(":button").click( function() { 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
<body> <div> <input type="button" value="get Geo" /> </div> <div id="baiduMap" style="width: 300px; height: 300px; float: left;"> </div> <div id="googleMap" style="width: 300px; height: 300px; float: left;"> </div> <div id="bingMap" style="width: 300px; height: 300px; float: left; position: relative;"> </div></body>
然後引入三家的服務指令碼
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
以下是測試代碼
$.log = function(msg) { console.log(msg);}$(function() { $(":button").click( function() { 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()); //採集時間 createBaiduMap(e.coords.longitude, e.coords.latitude); createBingMap(e.coords.longitude, e.coords.latitude); createGoogleMap(e.coords.longitude, e.coords.latitude); }, function(e) { //失敗回調 $.log(e.message); //錯誤資訊 $.log(e.code); //錯誤碼 }, {//選擇性參數 JSON格式 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加上控制器
function createBaiduMap(longitude, latitude) { var map = new BMap.Map("baiduMap"); var point = new BMap.Point(longitude, latitude); map.centerAndZoom(point, 15); map.addControl(new BMap.NavigationControl()); }
為bm添加了一個NavigationControl就可以看到效果了。
現在我們想在地圖上做一個標註，把我們給點的經緯度標註出來，同時我們也看看地圖服務商和HTML5的定位是不是比較准，三個地圖服務商的加標註代碼如下
function createBaiduMap(longitude, latitude) { var map = new BMap.Map("baiduMap"); var point = new BMap.Point(longitude, latitude); map.centerAndZoom(point, 15); map.addControl(new BMap.NavigationControl()); var marker = new BMap.Marker(point); //標註 marker.setLabel(new BMap.Label("我在這裡")); map.addOverlay(marker);}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 } } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map, title: "我在這裡" });}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); //圖釘 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很像的
$(function() { $(":button").click( function() { navigator.geolocation.watchPosition( 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()); //採集時間 createBaiduMap(e.coords.longitude, e.coords.latitude); createBingMap(e.coords.longitude, e.coords.latitude); createGoogleMap(e.coords.longitude, e.coords.latitude); }, function(e) { //失敗回調 $.log(e.message); //錯誤資訊 $.log(e.code); //錯誤碼 }, {//選擇性參數 JSON格式 enableHighAcuracy: false, //是否啟用高精確度模 timeout: 10, //在指定的時間內擷取位置資訊 maximumAge: 10, //瀏覽器重新擷取位置資訊的時間間隔 frequency: 1000//每隔3秒鐘檢索一次位置資訊 } ); } );});
要停止這個輪詢，只要用navigator.geolocation.clearWatch就可以了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
