首页 > 代码库 > HTML5 GeoLocation 地理定位

HTML5 GeoLocation 地理定位

2024-07-29 08:40:17   223人阅读

window.navigator 对象包含有关访问者浏览器的信息，window.navigator 对象在编写时可不使用 window 这个前缀。

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确



HTML5 地理定位

html5为window.navigator提供了geolocation属性，用于获取基于浏览器的当前用户地理位置。

window.navigator.geolocation提供了3个方法分别是

void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置int watchPosition(onSuccess,onError,options);//持续获取当前用户位置void clearWatch(watchId);//watchId 为watchCurrentPosition返回的值//取消监控options = {     enableHighAccuracy,//boolean 是否要求高精度的地理信息     timeout,//获取信息的超时限制     maximumAge//对地理信息进行缓存的时间}//options可以不写，为默认即可


使用getCurrentPosition()来获取用户位置(其实获取的是被用户使用的浏览器的位置)：

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<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){
　　x.innerHTML="Latitude: " + position.coords.latitude +
　　"<br />Longitude: " + position.coords.longitude;
}
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>


google地图应用：
和上面不同的是
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=http://www.mamicode.com/‘"+img_url+"‘ />";}


下面的例子展示 watchPosition() 方法：

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation(){
　　if (navigator.geolocation){
　　　　navigator.geolocation.watchPosition(showPosition);
　　}
　　else{

　　　　x.innerHTML="Geolocation is not supported by this browser.";

　　}
}
function showPosition(position){
　　x.innerHTML="Latitude: " + position.coords.latitude +
　　"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

 

HTML5 GeoLocation 地理定位


联系
我们