之前研究过一段时间的定位
当时没学过html,javascript,也不懂背后的原理
只知道用一些软件,比如说trape等等
现在学了google地图后,可以借助 navigator.geolocation来获取位置信息并呈现在google地图上
下面先做一个简单的测试,首先是低精度请求
在这种情况下navigator.geolocation基于IP定位或 Wi-Fi 定位,这里我开了代理…所以显示我在台湾
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
<script>
function initialize()
{
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var yourmap = {
center:new google.maps.LatLng(latitude ,longitude),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(latitude ,longitude),
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"我在这里!"
});
infowindow.open(map,marker);
};
function error() {
alert('地理位置不可用');
};
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(success, error);
} else
{
alert('地理位置不可用');
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
重点关注函数部分
function initialize()
{
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var yourmap = {
center:new google.maps.LatLng(latitude ,longitude),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(latitude ,longitude),
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"我在这里!"
});
infowindow.open(map,marker);
};
function error() {
alert('地理位置不可用');
};
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(success, error);
} else
{
alert('地理位置不可用');
}
};
sucess是我们主要的获取位置的函数,传入的参数是位置信息
function success(position) {
var latitude = position.coords.latitude;//保留精度和纬度
var longitude = position.coords.longitude;
var yourmap = {
center:new google.maps.LatLng(latitude ,longitude),
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};//根据我们获取到的地理位置确定地图中心
var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);//老熟人了..生成地图
var marker=new google.maps.Marker({
position:new google.maps.LatLng(latitude ,longitude)
});//生成我们的标记,位置是在返回的定位
marker.setMap(map);//老熟人
var infowindow = new google.maps.InfoWindow({
content:"我在这里!"
});//消息窗口,内容是我在这里
infowindow.open(map,marker);//长在上面
};
好像也没那么复杂
接下来是个返回结果失败的函数处理
function error() {
alert('地理位置不可用');
};
接下来这个就比较关键了,是我们获取地理位置的原函数
首先是个 if的判断语句
如果地理信息存在,我们将执行查询的函数,否则返回不可用
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(success, error);
} else
{
alert('地理位置不可用');
}
这个函数是geolocation里面的精髓
navigator.geolocation.getCurrentPosition(success, error);
获取用户当前定位位置
异步地请求获取用户位置,并查询定位硬件来获取最新信息。当定位被确定后,定义的第一个回调函数(success)就会被执行。您可以选择性地提供第二个回调函数,当有错误时会被执行(错误处理函数)。第三个参数也是可选的,您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位
默认情况下,getCurrentPosition() 会尽快返回一个低精度结果,这在您不关心准确度只关心快速获取结果的情况下很有用。有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位,在这种情况下 getCurrentPosition() 会返回低精度数据(基于 IP 的定位或 Wi-Fi 定位),就是我们这次测试基于的就是ip定位
所有的函数都在initliaze里面定义好,然后通过一个 google.maps.event.addDomListener(window, ‘load’, initialize);在初始化的时候调用,整体上来说思路还是比较清晰的,希望大家可以喜欢
忘记说了…现在获取地理信息一定要先针得用户的同意,比如说在firefox里会弹出,是否允许获取当前位置信息,只有确定了才会get到,当然别人同不同意就看你的本事啦