从零开始学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)--粗略获取当前位置相关推荐

从零开始学google地图API(1)--获取api_key并显示google地图
google 登录进去 ,如果有google账号就直接登录,如果没有就注册一下进去之后大概这个样子点击左边的Google地图,然后会看到有很多api,选择你需要使用的这里我们选择Maps Jav ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
转载：高德地图API学习从零开始学高德JS API（一）地图展现
原文地址:https://www.cnblogs.com/milkmap/p/3687855.html [高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘 ...
java高德地图api开发平台_【高德地图API】从零开始学高德JS API（一）地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
如何获取Google地图API密钥？(翻译版)
对于使用Google浏览器的用户,可以使用浏览器的翻译功能将原网页翻译为中文网站,下面的操作为翻译为中文后的操作方法: 使用Google地图的用户需要注意了!Google地图于2016年6月22日更新 ...
如何获取Google地图API密钥？
如何获取Google地图API密钥? 使用Google地图的用户需要注意了!Google地图于2016年6月22日更新了Google地图API接口,更新接口后必需要申请Google地图API密钥才可以 ...

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

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

最新文章

热门文章