js获取用户精准经纬度的实现原理及源码

2、watchPosition和clearWatch

watchPosition的参数和getCurrentPosition一致，区别是watchPosition会在开始及每次用户位置发生变化的时候更新地理位置触发成功回调，这在导航类应用场景非常实用。我们可以调用clearWatch清除位置监视，如下示例：

这就是浏览器提供的地理位置API，使用它们我们的web页面就可以提供LBS服务及其他地理位置服务，变得更为强大。要注意的是获取地理位置可能会耗费一定时间，此时前台给用户一个等待反馈会提升用户体验，而实际应用场景中如何提升获取地理位置的精确度和效率，我们在后面的章节细讲。

3、兼容性

地理位置API被以下桌面浏览器支持：

* IE 9+

* Firefox 3.5+

* Chrome 5+

* safari 5+

* Opera 16+

以及以下移动设备浏览器支持：

* iOS Safari 3.2+

* Android Browser 2.1+

* Chrome for Android

* Firefox for Android 38+

* Opera mobile 12+

4、示例源码：

首先我们创建一个dom节点<div id="geoloc"></div>判断浏览器支持Geolocation API后，通过参数的corrds属性就可以取到经纬度坐标了，如下

下一步我们要引入一个谷歌地图来定位，这里需要引入谷歌地图的API，如下

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

接着对获取经纬度的函数做一个改造

<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '560px';
getElem("map_canvas").appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"你在这里！"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
}
</script>