方法一:html5原生提供的定位: 讲解:在支持HTML5的浏览器下,navigator对象下有一个属性----geolocation,而geolocation属性又有个方法getCurrentPosition(回调函数1,回调函数2)可以通过浏览器向设备发起定位请求,浏览器就会让设备发送相关指令到附近上网设备,上网设备返回定位信息给用户设备,浏览器就获得了用户位置。 当浏览器获得定位信息成功,则navigator.geolocation.getCurrentPosition(回调函数1,回调函数2); 中的回调函数1执行,如果定位失败,则回调函数2执行。 若定位成功,则自动把定位结果对象作为参数传递给回调函数1,。 若定位失败,则自动把错误对象传递给回调函数2. 所以在回调函数2中可通过error.code 获取到错误码。(假设形参名为error)。 如下代码就是用HTML5获取定位信息,并把成功定位交给showPosition处理,把错误定位交给showError处理。 eg: if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ alert(Geolocation is not supported by this browser); } //浏览器不支持HTML5. 详细代码: *{ height: 100%; //设置高度,不然会显示不出来 } $(function(){ navigator.geolocation.getCurrentPosition(translatePoint); //定位 }); function translatePoint(position){ var currentLat = position.coords.latitude; var currentLon = position.coords.longitude; var gpsPoint = new BMap.Point(currentLon, currentLat); BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标:gpsPoint:转换前坐标,第二个参数为转换方法,0表示gps坐标转换成百度坐标,callback回调函数,参数为新坐标点 } function initMap(point){ //初始化地图 map = new BMap.Map("map"); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.centerAndZoom(point, 15); map.addOverlay(new BMap.Marker(point)) } 注释: 这是因为htm5 的 getCurrentPosition 获取到的坐标是 GPS 经纬度坐标,而百度地图的坐标是经过特殊转换的,所以,在获取定位坐标和初始化地图之间需要进行一步坐标转换工作,该转换方法百度API里面已经提供了,转换一个点或者批量装换的方法均有提供:单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js,批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js,这里只需要前者即可:
|