从零开始学google地图API(5)--粗略获取当前位置

之前研究过一段时间的定位
当时没学过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到，当然别人同不同意就看你的本事啦

从零开始学google地图API(5)--粗略获取当前位置

猜你喜欢