html 5獲取GPS位置,Google地圖顯示
阿新 • • 發佈:2018-11-11
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!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