html5 地理定位学习小结-CSDN博客

本文链接：https://blog.csdn.net/Sunshinegirllwx/article/details/8941247

本文详细介绍了HTML5地理定位的基础知识，包括如何检查浏览器支持、获取当前位置、加载地图及在地图上显示用户位置的过程。通过实例代码演示，旨在帮助读者理解和应用地理定位功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天，不知哪来的雅兴就是特别想了解html5 地理定位那块知识。

于是乎，屌丝我兴冲冲的拿起书本开始看，

下面是今天的学习小结，希望有兴趣的友友共勉

我来理清思路哈，咱们把逻辑搞好，就好理解了

步骤：

第一步：1.先检查支持（因为有的浏览器不支持的，so这步比较重要，这个代码我试了好久，

最后只有在ff上成功了，连支持最好的gg都没支持）

第二步：2.获取当前位置（介个要用到系统给的函数了getCurrentPosition（successCallback,errorCallback,options）

这里的参数只有第一个是必须的，指位置确定时你想要调用的函数名称）

难点：

1.地理定位的position对象

position对象，正如在地理定位的API中定义的，这家伙有两个属性，一个包含位置的坐标(coords),

另一个包含位置确定时的时间戳(timestamp):

interface position{

readonly attribute Coordinates coords;

readonly attribute DOMTimeStamp timestamp;

}

2.经度纬度在哪里呢？嘿嘿，它们就存储在Coordinates对象中。

interface Coordinate{

readonly attribute double latitude;

readonly attrbute double longitude;

readonly attrbute double accuracy;

}

明白了没？latitude，longitude 不言而喻就是用户们的经度纬度，

accuracy属性以米为单位，告诉你经度纬度的精确度

获取进度纬度：

var latitude=position.coords.latitude;

var longitude=position.coords.longitude;

3.加载地图

为了在地图上显示用户的位置，我们将利用Google Maps js API,但在使用API之前，我们需要

在页面上添加一个引用（<script src="http://maps.google.com/maps/api/js?sensor=false">），

无需下载库，我们可以指向Google公开可用的API版本。

注意引用中sensor参数，不能省的会报错，表示此应用程序是否使用传感器(GPS设备)来确定

用户的位置，你必须明确设置true or false，因为地理定位无法得知获得信息是否来自传感器，

对于大多数web程序来说，设置false是安全的，除非是专为具有gps功能的设备创建的，eg:iphone.

//创建地图并输出到页面
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);

4.那么我们已经有了地图，让我们来添加个标记吧，就是咱们在地图上看到的小红色水滴

var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

//详细的代码

<body>
<p id="demo">点击这个按钮，获得你的位置:</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
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.";
}
}
/*showPosition为获取信息成功的回调函数，返回的数据中包含经纬度等信息
结合google Map API即可在地图中显示当前用户的位置信息*/