js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法
更新時間：2015年06月05日 11:52:44 作者：pythoner
這篇文章主要介紹了js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法,涉及html5元素的操作技巧,需要的朋友可以參考下
本文實例講述了js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!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程序設(shè)計有所幫助。
相關(guān)文章
javascript瀏覽器用戶代理檢測腳本實現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript瀏覽器用戶代理檢測腳本實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JavaScript實現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細介紹了JavaScript如何實現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
微信小程序wx.navigateTo中events屬性實現(xiàn)頁面間通信傳值，數(shù)據(jù)同步
這篇文章主要介紹了微信小程序wx.navigateTo中events屬性實現(xiàn)頁面間通信傳值，數(shù)據(jù)同步,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
ES6如何將?Set?轉(zhuǎn)化為數(shù)組示例詳解
這篇文章主要為大家介紹了ES6如何將?Set?轉(zhuǎn)化為數(shù)組的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
JavaScript設(shè)計模式之單例模式簡單實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之單例模式,結(jié)合簡單實例形式分析了單例模式的概念、功能及javascript定義與使用單例模式相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
面試中?？嫉腏avaScript中簡單類型數(shù)據(jù)轉(zhuǎn)換盤點
我們都知道,JS是弱類型語言,變量的類型是可以改變的,本文我們只討論es6之前的簡單數(shù)據(jù)類型的顯示轉(zhuǎn)換String,Number,Boolean這3種,有需要的可以參考下2024-12-12
在mpvue框架中使用Vant WeappUI組件庫的注意事項【推進】
這篇文章主要介紹了在mpvue框架中使用Vant WeappUI組件庫的注意事項,本文給大家提到了引入組件庫的兩種方法，需要的朋友可以參考下2019-06-06
最近沒有項目做，閑來沒事，于是自己動手寫了幾個表單驗證，特此分享供大家參考2015-11-11
這篇文章主要介紹了javascript中setInterval的用法的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了JavaScript變量作用域，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03