溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
獲取短信驗證碼
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
登 錄 注冊有禮
云服務器 香港服務器 高防服務器
最新更新 網站標簽 地圖導航
產品

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

發布時間：2020-05-29 22:05:03 來源：網絡 閱讀：666 作者：shyleoking 欄目：移動開發

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

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

 

 

 

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

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

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

  1. [html] view plaincopy 
  2. <body>  
  3. <input type="button" value="get Geo" />  
  4. </body> 
  5.  
  6. javaScript的代碼如下 
  7. [javascript] view plaincopy 
  8. $(  
  9. function() {  
  10. $(":button").click(  
  11. function() {  
  12. navigator.geolocation.getCurrentPosition(  
  13. function(e) { //成功回調  
  14. $.log(e.coords.accuracy); //準確度  
  15. $.log(e.coords.latitude); //緯度  
  16. $.log(e.coords.longitude); //經度  
  17. $.log(e.coords.altitude); //海拔高度  
  18. $.log(e.coords.altitudeAccuracy); //海拔高度的精確度  
  19. $.log(e.coords.heading); //行進方向  
  20. $.log(e.coords.speed); //地面的速度  
  21. $.log(new Date(e.timestamp).toLocaleDateString());//采集日期  
  22. $.log(new Date(e.timestamp).toLocaleTimeString());//采集時間  
  23. },  
  24. function(e) { //失敗回調  
  25. $.log(e.message); //錯誤信息  
  26. $.log(e.code); //錯誤代碼  
  27. },  
  28. {//可選參數 JSON格式  
  29. "enableHighAcuracy": false, //是否啟用高精確度模  
  30. "timeout": 100, //在指定的時間內獲取位置信息  
  31. "maximumAge": 0//瀏覽器重新獲取位置信息的時間間隔  
  32. }  
  33. );  
  34. }  
  35. );  
  36. }  
  37. ); 

現在你點擊按鈕，就可以在控制臺看到經緯度和采樣日期時間了。
那獲得了經緯度的值，必然首先要做的就是地圖定位了，現在主流的地圖服務我知道的有：baidu，google，和bing，下面我來測試我們得到的經緯度在這三個地圖服務中取得的地圖圖像吧。

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

 

先看看我們的body

  1. [javascript] view plaincopy 
  2. <body>  
  3. <div>  
  4. <input type="button" value="get Geo" />  
  5. </div>  
  6. <div id="baiduMap" style="width: 300px; height: 300px; float: left;">  
  7. </div>  
  8. <div id="googleMap" style="width: 300px; height: 300px; float: left;">  
  9. </div>  
  10. <div id="bingMap" style="width: 300px; height: 300px; float: left; position: relative;">  
  11. </div>  
  12. </body> 

然后引入三家的服務腳本

  1. [javascript] view plaincopy 
  2. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  3.  
  4. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>  
  5.  
  6. <script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script> 

以下是測試代碼

  1. [javascript] view plaincopy 
  2. $.log = function(msg) {  
  3. console.log(msg);  
  4. }  
  5.  
  6. $(  
  7. function() {  
  8. $(":button").click(  
  9. function() {  
  10. navigator.geolocation.getCurrentPosition(  
  11. function(e) { //成功回調  
  12. $.log(e.coords.accuracy); //準確度  
  13. $.log(e.coords.latitude); //緯度  
  14. $.log(e.coords.longitude); //經度  
  15. $.log(e.coords.altitude); //海拔高度  
  16. $.log(e.coords.altitudeAccuracy); //海拔高度的精確度  
  17. $.log(e.coords.heading); //行進方向  
  18. $.log(e.coords.speed); //地面的速度  
  19. $.log(new Date(e.timestamp).toLocaleDateString()); //采集日期  
  20. $.log(new Date(e.timestamp).toLocaleTimeString()); //采集時間  
  21. createBaiduMap(e.coords.longitude, e.coords.latitude);  
  22. createBingMap(e.coords.longitude, e.coords.latitude);  
  23. createGoogleMap(e.coords.longitude, e.coords.latitude);  
  24. },  
  25. function(e) { //失敗回調  
  26. $.log(e.message); //錯誤信息  
  27. $.log(e.code); //錯誤代碼  
  28. },  
  29. {//可選參數 JSON格式  
  30. enableHighAcuracy: false, //是否啟用高精確度模  
  31. timeout: 100, //在指定的時間內獲取位置信息  
  32. maximumAge: 0//瀏覽器重新獲取位置信息的時間間隔  
  33. }  
  34. );  
  35. }  
  36. );  
  37. }  
  38. );  
  39.  
  40.  
  41. function createBaiduMap(longitude, latitude) {  
  42. var map = new BMap.Map("baiduMap");  
  43. var point = new BMap.Point(longitude, latitude);  
  44. map.centerAndZoom(point, 15);  
  45. }  
  46.  
  47. function createGoogleMap(longitude, latitude) {  
  48. var map = new google.maps.Map(document.getElementById("googleMap"),  
  49. {  
  50. center: new google.maps.LatLng(latitude, longitude),  
  51. zoom: 14,  
  52. mapTypeId: google.maps.MapTypeId.ROADMAP,  
  53. mapTypeControl: false,  
  54. navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }  
  55. }  
  56. );  
  57. }  
  58.  
  59. function createBingMap(longitude, latitude) {  
  60. var map = new VEMap("bingMap");  
  61. var LA = new VELatLong(latitude, longitude);  
  62. map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);  
  63. } 

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

  1. [javascript] view plaincopy 
  2. function createBaiduMap(longitude, latitude) {  
  3. var map = new BMap.Map("baiduMap");  
  4. var point = new BMap.Point(longitude, latitude);  
  5. map.centerAndZoom(point, 15);  
  6. map.addControl(new BMap.NavigationControl());  
  7. } 

為bm添加了一個NavigationControl就可以看到效果了。
現在我們想在地圖上做一個標注，把我們給點的經緯度標注出來，同時我們也看看地圖服務商和HTML5的定位是不是比較準，三個地圖服務商的加標注代碼如下

  1. [javascript] view plaincopy 
  2. function createBaiduMap(longitude, latitude) {  
  3. var map = new BMap.Map("baiduMap");  
  4. var point = new BMap.Point(longitude, latitude);  
  5. map.centerAndZoom(point, 15);  
  6. map.addControl(new BMap.NavigationControl());  
  7. var marker = new BMap.Marker(point); //標注  
  8. marker.setLabel(new BMap.Label("我在這里"));  
  9. map.addOverlay(marker);  
  10. }  
  11.  
  12. function createGoogleMap(longitude, latitude) {  
  13. var map = new google.maps.Map(document.getElementById("googleMap"),  
  14. {  
  15. center: new google.maps.LatLng(latitude, longitude),  
  16. zoom: 14,  
  17. mapTypeId: google.maps.MapTypeId.ROADMAP,  
  18. mapTypeControl: false,  
  19. navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }  
  20. }  
  21. );  
  22. var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude),  
  23. map: map,  
  24. title: "我在這里" });  
  25. }  
  26.  
  27. function createBingMap(longitude, latitude) {  
  28. var map = new VEMap("bingMap");  
  29. var LA = new VELatLong(latitude, longitude);  
  30. map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); //圖釘  
  31. var myPolygon = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude, 0, VEAltitudeMode.Default));  
  32. map.AddShape(myPolygon);  
  33. myPolygon.SetTitle("我在這里");  
  34.  
  35. } 

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

  1. [javascript] view plaincopy 
  2. $(  
  3. function() {  
  4. $(":button").click(  
  5. function() {  
  6. navigator.geolocation.watchPosition(  
  7. function(e) { //成功回調  
  8. $.log(e.coords.accuracy); //準確度  
  9. $.log(e.coords.latitude); //緯度  
  10. $.log(e.coords.longitude); //經度  
  11. $.log(e.coords.altitude); //海拔高度  
  12. $.log(e.coords.altitudeAccuracy); //海拔高度的精確度  
  13. $.log(e.coords.heading); //行進方向  
  14. $.log(e.coords.speed); //地面的速度  
  15. $.log(new Date(e.timestamp).toLocaleDateString()); //采集日期  
  16. $.log(new Date(e.timestamp).toLocaleTimeString()); //采集時間  
  17. createBaiduMap(e.coords.longitude, e.coords.latitude);  
  18. createBingMap(e.coords.longitude, e.coords.latitude);  
  19. createGoogleMap(e.coords.longitude, e.coords.latitude);  
  20. },  
  21. function(e) { //失敗回調  
  22. $.log(e.message); //錯誤信息  
  23. $.log(e.code); //錯誤代碼  
  24. },  
  25. {//可選參數 JSON格式  
  26. enableHighAcuracy: false, //是否啟用高精確度模  
  27. timeout: 10, //在指定的時間內獲取位置信息  
  28. maximumAge: 10, //瀏覽器重新獲取位置信息的時間間隔  
  29. frequency: 1000//每隔3秒鐘檢索一次位置信息  
  30. }  
  31. );  
  32. }  
  33. );  
  34. }  
  35. ); 

 

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

向AI問一下細節
推薦閱讀：
  1. HTML5 地理位置定位（HTML5 Geolocation）
  2. HTML5如何使用地理定位

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

eol og

猜你喜歡

最新資訊
相關推薦

相關標簽

geolocation eolinker php_eol 項目 php centos6 eol 診斷 整車 動畫 中心 用 og 文檔 api doc eolinker php_eo 位 維護模式
AI
助
手
產品服務
地區劃分
專題活動
幫助支持
關于我們
售后咨詢
7*24小時在線電話：400-100-2938
7*24小時在線 QQ：800811969
關注億速云

億速云公眾號

手機網站二維碼

Copyright ? Yisu Cloud Ltd. All Rights Reserved. 2018 版權所有

廣州億速云計算有限公司粵ICP備17096448號-1 粵公網安備 44010402001142號增值電信業務經營許可證編號：B1-20181529

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女