HTML5 GeoLocation 地理定位

浏览数：37 / 时间：2015年06月09日

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=‘"+img_url+"‘ />";
}



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

　　　　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 地理定位