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程序設計有所幫助。
相關文章
微信小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗,下面這篇文章主要給大家介紹了關于微信小程序自定義tabbar問題的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要給大家介紹了關于如何通過setTimeout理解JS運行機制的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要介紹了es6和commonJs的區(qū)別,ES6的模塊化規(guī)范更加先進、靈活，能夠適應更多的應用場景，而CommonJS則更加簡單、易用，廣泛應用于Node.js開發(fā)中，在實際應用中，可以根據(jù)具體情況選擇使用不同的模塊化方案，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了微信小程序封裝多張圖片上傳api代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
bootstrap daterangepicker雙日歷時間段選擇控件詳解
這篇文章主要為大家詳細介紹了bootstrap daterangepicker雙日歷時間段選擇控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
常用Javascript函數(shù)與原型功能收藏(必看篇)
下面小編就為大家?guī)硪黄Ｓ肑avascript函數(shù)與原型功能收藏(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
el表達式 寫入bootstrap表格數(shù)據(jù)頁面的實例代碼
這篇文章主要介紹了el表達式 寫入bootstrap表格數(shù)據(jù)頁面的實例代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-01-01
探索export導出一個字面量會報錯export?default不會報錯
這篇文章主要為大家介紹了export導出一個字面量會報錯而export?default不會報錯的問題探索解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
這篇文章主要給大家介紹了關于JavaScript this關鍵字的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
很神奇！js實現(xiàn)顏色漸變效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08