1. 程式人生 > >html 5獲取GPS位置,Google地圖顯示

html 5獲取GPS位置,Google地圖顯示

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               

場景:

JQuery Mobile


程式碼片段:

 <script type="text/javascript"> $('#mylocation'
).live('pageshow', function () {   if (navigator.onLine) {     $("#mylocation_status").text('網路連線正常');        } else {          $("#mylocation_status").text('沒有網路連線');        }        if
(navigator.geolocation) {     $("#mylocation_status").text('GPS定位中。。。');        navigator.geolocation.getCurrentPosition(function(position) {         $("#mylocation_status").text('GPS定位完成,' + position.coords.latitude + ','
+ position.coords.longitude);      htmlString = "<img src='http://maps.googleapis.com/maps/api/staticmap?";      htmlString = htmlString + "center=" + position.coords.latitude + "," + position.coords.longitude + "&";      htmlString = htmlString + "zoom=15&size=290x360&maptype=roadmap&markers=color:red%7Clabel:S%7C" + position.coords.latitude + "," + position.coords.longitude + "&sensor=false'/>";      $("#map_canvas").html(htmlString);       });   }else {    $("#mylocation_status").text('GPS定位失敗');   }       }); </script>

sfd



參考:

Static Maps API V2 Developer Guide
 靜態圖片API
key要申請
https://developers.google.com/maps/documentation/staticmaps/#api_key


API說明
https://developers.google.com/maps/documentation/staticmaps/#api_key


測試:
NY
http://maps.googleapis.com/maps/api/staticmap?center=New+York,NY&zoom=13&size=600x300&key=API_console_key
SH
http://maps.googleapis.com/maps/api/staticmap?center=Shanghai+Hai,SH&zoom=13&size=600x300&key=AIzaSyBP24UOltpPGbNYDa-sS7YXKEvkxuPHfNs&sensor=false

Mobile Web 應用例子程式   :  Build an Exercise Tracking App: Persistence & Graphing

           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述