這篇文章主要介紹了js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法,涉及html5元素的操作技巧,需要的朋友可以參考下
本文實例講述了js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法。分享給大家供大家參考。具體實現方法如下：
- <!DOCTYPE html>
- <html>
- <body>
- <p id="demo">Click the button to get your position:</p>
- <button onclick="getLocation()">Try It</button>
- <div id="mapholder"></div>
- <script>
- var x=document.getElementById("demo");
- function getLocation()
- {
- if (navigator.geolocation)
- {
- navigator.geolocation.getCurrentPosition(showPosition,showError);
- }
- else{x.innerHTML="Geolocation is not supported by this browser.";}
- }
- function showPosition(position)
- {
- var latlon=position.coords.latitude+","+position.coords.longitude;
- var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
- +latlon+"&zoom=14&size=400x300&sensor=false";
- document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
- }
- function showError(error)
- {
- switch(error.code)
- {
- case error.PERMISSION_DENIED:
- x.innerHTML="User denied the request for Geolocation."
- break;
- case error.POSITION_UNAVAILABLE:
- x.innerHTML="Location information is unavailable."
- break;
- case error.TIMEOUT:
- x.innerHTML="The request to get user location timed out."
- break;
- case error.UNKNOWN_ERROR:
- x.innerHTML="An unknown error occurred."
- break;
- }
- }
- </script>
- </body>
- </html>
希望本文所述對大家的web程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
