html5定位获取当前位置并在百度地图上显示.pdf

在开发移动端 web 或者 webapp 时，使用百度地图 API 的过程中， 经常需要通过手机 定位获取当前位置并在地图上居中显示出来，这就需要用到 html5 的地理定位功能。 代码如下 : navigator.geolocation.getCurrentPosition(callback); 在获取坐标成功之后会执行回调函数 callback; callback 方法的参数就是获取到的坐标 点；然后可以初始化地图， 设置控件、 中心点、 缩放等级， 然后给地图添加 point 的 overlay ： 代码如下 : var map = new BMap.Map(mapDiv);//mapDiv 为放地图的 div 的 id map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.centerAndZoom(point, 15);//point 为坐标点， 15 为地图缩放级别，最大级别是 18 var pointMarker = new BMap.Marker(point); map.addOverlay(pointMarker); 然而事实上这样还不够，显示出来的结果并不准，这是因为 getCurrentPosition 获取到 的坐标是 GPS 经纬度坐标，而百度地图的坐标是经过特殊转换的，所以，在获取定位坐标 和初始化地图之间需要进行一步坐标转换工作，该转换方法百度 API 里面已经提供了，转 换一个点或者批量装换的方法均有提供：单个点转换需引用，批量转换需引用 ，这里只需 要前者即可： 代码如下 : BMap.Convertor.translate(gpsPoint, 0, callback); //gpsPoint ：转换前坐标，第二个参数为转换方法， 0 表示 gps 坐标转换成百度坐标， callback 回调函数，参数为新坐标点 例子的详细代码如下： （引用中的 ak 是申请的 key） 代码如下 : lt;!DOCTYPE htmlgt; lt;html lang=zh-cngt; lt;headgt; lt;meta name=viewport content=initial-scale=1.0, user-scalable=no /gt; lt;meta http-equiv=Content-Type content=text/html; charset=utf-8 /gt; lt;titlegt;lt;/titlegt; lt;style type=text/cssgt; *{ height: 100%; // 设置高度，不然会显示不出来 } lt;/stylegt; lt;script src=gt; lt;script type=text/javascript src=gt; lt;script type=text/javascript src=gt; lt;scriptgt; $(function(){ navigator.geolocation.getCurrentPosition(trans