h5地理定位
H5提供了地理定位(geolocation)API,可以获取用户的经纬度信息
- 判断浏览器是否支持地理定位
- 如果支持,就调用navigator.geolocation属性的getCurrentPosition方法。
该方法接受三个参数,即getCurrentPosition(successHandler, errorHandler, options);后两个为可选参数
1. successHandler 当浏览器成功获取到你的位置时会调用这个successHandler函数,并传入一个position对象,
该对象会有两个属性:coords和timestamp(包含创建这个position的时间)。
2. errorHandler 为错误信息处理函数。 - 这个position属性下有个coords,可以获取经纬度信息,即latitude和longitude。这样就可以拿到用户的经纬度数据。
3. options,enableHighAccuracy表示是否允许使用高精度,为true和false, timeout: 2000,maximumAge: 2000
代码:
//判断浏览器支持
if(window.navigator.geolocation) {
//调用getCurrentPosition方法
window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError);
//注:options 为第三个参数 ,为可选参数
//var options = {enableHighAccuracy: true,timeout: 2000,maximumAge: 2000};
}else{
console.log("浏览器不支持html5来获取地理位置信息");
}
function handleSuccess(position){
//经纬度
var lng = position.coords.longitude;
var lat = position.coords.latitude;
//转化成百度经纬度
//在这里操作
}
function handleError(error){
var result;
switch (error.code) {
case error.PERMISSION_DENIED:
result="请打开您的定位系统";
break;
case error.POSITION_UNAVAILABLE:
result="暂时获取不到您的地点信息,请手动选择城市";
break;
case error.TIMEOUT:
result="连接超时";
break;
case error.UNKNOWN_ERROR:
result="发生了位置错误";
break;
}
}
以上是做好了获取定位信息
- 以我个人经验是直接在这里转化成百度经纬度
以下示例,是调取百度接口获取周边详细信息
代码:
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
var s=data.points[0].lng;
var k=data.points[0].lat;
var lists={
lng:s,
lat:k,
ak:'自己的密钥'
}
console.log(lists.lng+','+lists.lat);
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src='http://api.map.baidu.com/geocoder/v2/?ak='+lists.ak+'&callback=jsonpCallbacks&location='+lists.lat+','+lists.lng+'&output=json&pois=1';
document.getElementsByTagName("head")[0].appendChild(JSONP);
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback);
}, 1000);
function jsonpCallbacks(data){
//详情信息
}
- 把经纬度转换成具体城市信息。这个可以自己根据项目需要,可以自己编写一个城市经纬度范围查询库,也可以调用百度的地图API。
- 百度的Geocoding和逆Geocoding API具体参数和用法,请访问http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding
如有错误地方,请留言指教,谢谢大家