php获取用户当前坐标,web端定位:获取当前地理位置

方法一: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,这里只需要前者即可:

方法二:百度地图提供的API

(1)通过浏览器定位:

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

浏览器定位

// 百度地图API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.331398,39.897445);

map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

var mk = new BMap.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

alert('您的位置:'+r.point.lng+','+r.point.lat);

}

else {

alert('failed'+this.getStatus());

}

},{enableHighAccuracy: true})

//关于状态码

//BMAP_STATUS_SUCCESS检索成功。对应数值“0”。

//BMAP_STATUS_CITY_LIST城市列表。对应数值“1”。

//BMAP_STATUS_UNKNOWN_LOCATION位置结果未知。对应数值“2”。

//BMAP_STATUS_UNKNOWN_ROUTE导航结果未知。对应数值“3”。

//BMAP_STATUS_INVALID_KEY非法密钥。对应数值“4”。

//BMAP_STATUS_INVALID_REQUEST非法请求。对应数值“5”。

//BMAP_STATUS_PERMISSION_DENIED没有权限。对应数值“6”。(自 1.1 新增)

//BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用。对应数值“7”。(自 1.1 新增)

//BMAP_STATUS_TIMEOUT超时。对应数值“8”。(自 1.1 新增)

(2)通过ip定位:

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

IP定位获取当前城市

// 百度地图API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.331398,39.897445);

map.centerAndZoom(point,12);

function myFun(result){

var cityName = result.name;

map.setCenter(cityName);

alert("当前定位城市:"+cityName);

}

var myCity = new BMap.LocalCity();

myCity.get(myFun);

百度地图Api:

//让所有点在视野范围内 pointArray:点集合

map.setViewport(pointArray);

//清除所有点集合

map.clearOverlays();

注释:

百度地图开放平台:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding

百度地图生成器:http://api.map.baidu.com/lbsapi/creatmap/index.html

http://developer.baidu.com/map/jsdemo.htm#i8_2

申请百度地图API密匙步骤:http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html

百度地图  地名 转换成经纬度 参考文章:http://www.jb51.net/article/58396.htm

方法三:高德地图定位:

地址:http://lbs.amap.com/api/javascript-api/example/map/map-show/

大家自己去查看

参考:http://blog.csdn.net/suixufeng/article/details/13511761

http://www.jb51.net/html5/208408.html

http://blog.csdn.net/xmtblog/article/details/45093661

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在web使用腾讯地图API获取用户地理位置,可以使用HTML5中的Geolocation API。以下是一些简单的步骤: 1. 注册腾讯地图开发者账号并创建应用程序,然后获取密钥。 2. 在HTML页面中嵌入JavaScript代码,使用Geolocation API请求用户位置: ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; // 调用腾讯地图API进行地理编码 } ``` 3. 在showPosition函数中,可以将用户的经纬度坐标传递给腾讯地图API进行地理编码,以获取用户位置的详细信息: ```javascript function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key=YOUR_KEY"; fetch(url) .then(response => response.json()) .then(data => { console.log(data.result.formatted_addresses.recommend); // 显示用户位置信息 }); } ``` 在以上代码中,需要将YOUR_KEY替换为你在腾讯地图开发者账号中生成的API密钥。 4. 最后,可以将获取到的用户位置信息显示在页面上,以便用户看。 需要注意的是,使用Geolocation API获取用户位置需要用户授权。在请求用户授权时,可以使用下面的代码: ```javascript navigator.permissions.query({name:'geolocation'}).then(function(result) { if (result.state === 'granted') { navigator.geolocation.getCurrentPosition(showPosition); } else if (result.state === 'prompt') { navigator.geolocation.getCurrentPosition(showPosition, showError); } else if (result.state === 'denied') { showError("User denied geolocation"); } }); ``` 在以上代码中,使用permissions.query()函数用户是否授权Geolocation API,并根据结果调用相应的函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值