js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法

2024-05-06 16:21:29

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>