基于html的地理定位

最近项目要用到HTML5进行地理定位，上网查阅了一番，学习了借助高德地图 JS API和HTML5 Geolocation API两种地理定位的方法，特此记录。

实现效果如图：

1、实现原理：html5地理定位 + 高德地图

2、实现思路：

① 判断浏览器是否支持geolocation地理定位

② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度

③ 调用高德地图接口，将获取到的经纬度以参数形式参入高德地图地理坐标中，并显示到页面上

（也可以调用百度地图、谷歌地图、腾讯地图等，只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中）

3、代码实现：

①调用高德地图JavaScript API，URL路径为：https://webapi.amap.com/maps?v=1.4.8&key=你的key值

②核心代码：

此代码在PC端运行，会得不到数据，因为获取位置信息，以及监控位置的变化这些操作都属于敏感性操作，所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。

在移动端，会提示是否允许地理位置授权，用户同意后，才会继续获取数据，进行下面的操作。