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

 

　　实现效果如图：

 

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

 

　　2、实现思路：

 

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

 

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

 

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

 

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

 

　　3、代码实现：

 

　　①调用高德地图JavaScript API，URL路径为：你的key值

 

　　②核心代码：

 

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

 

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