利用百度地图api和geolocation获取浏览器地理位置并计算位置距离
1、通过百度地图api获取浏览器经纬度
引入百度地图api(需申请获取ak)
引入文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=申请获取"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
js部分
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom("武汉",13);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.enableScrollWheelZoom();
map.disableDoubleClickZoom();
map.addControl(new BMap.MapTypeControl());
var lastm = null;
function addmark(m) {
if (lastm != null) {
map.removeControl(lastm);
}
lastm = m;
m.enableDragging();
var la = new BMap.Label("点击保存");
la.addEventListener("click", function (e) {
map.removeEventListener("click", mapclick);
setTimeout(function () { map.addEventListener("click", mapclick,false); }, 10);
m.addEventListener("dragend",uppoint);
var pp = m.getPosition();
top.setpoint(pp.lng, pp.lat);
return;
//top.art
lastm1=m;
var boxhtml = "<div id=\"box\">" +
"<form method=\"post\" οnsubmit='return submitform(this);'>" +
"<h4>添加坐标信息<\/h4>" +
"<p><span>坐标:<\/span><input name=\"point\" id=\"point\" value=\"" + pp.lng + "," + pp.lat + "\" style=\"width:200px;\"/><\/p>" +
"<p id=\"p_sub\"><input type=\"submit\" value=\"确定\" \/><input type=\"reset\" value=\"清除\" \/><\/p>" +
"<\/form>" +
"<\/div>";
lastm.openInfoWindow(new BMap.InfoWindow(boxhtml));
});
la.setStyle({ padding: "5px","max-width":"100px" });
la.setOffset(new BMap.Size(23, 0));
m.setLabel(la);
}
(function(){
var str = top.point;
if(str=="")return;
var pp = new RegExp("([\\d\.]+),([\\d\.]+)").exec(str);
var point=new BMap.Point(pp[1], pp[2]);
var m = new BMap.Marker(point);
map.addOverlay(m);
addmark(m);
})();
function mapclick(e) {
var m = new BMap.Marker(e.point);
map.addOverlay(m);
addmark(m);
}
map.addEventListener("click", mapclick);
var myPushpin = new BMapLib.MarkerTool(map, { autoClose: false, followText: "放到选定的位置,可以拖动" });
myPushpin.addEventListener("markend", function (e) {
addmark(e.marker); myPushpin.close();
});
document.getElementById("djdiv").onclick = function (e) { myPushpin.open(); }
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
function search_map() {
local.search($("#xx").val());
}
function uppoint(){
if($("#point").length==0)return;
var pp = lastm1.getPosition();
$("#point").val( pp.lng + "," + pp.lat );
}
$(function () {
$("#xx").keyup(function (event) {
if (event.keyCode == 13) {
$("#btn_search").click();
}
});
$("#container").on("blur", "#point", function (event) {
var pp = new RegExp("([\\d\.]+),([\\d\.]+)").exec($("#point").val());
if (pp != null) {
var myPoint = new BMap.Point(pp[1], pp[2]);
lastm1.setPosition(myPoint);
map.panTo(myPoint);
}
else alert($("#point").val())
});
});
function submitform(ff) {
var xx = $(ff).serialize();
}
</script>
2.获取浏览当前位置经纬度
<script type="text/javascript">
//获取位置
var longitude = 0;
var latitude = 0;
$(document).on('click', '.getLocation', function (){
var options = {
enableHighAccuracy : true,
maximumAge : 1000
};
if(navigator.geolocation) {
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}
});
//成功时
function onSuccess(position){
//经度
longitude = position.coords.longitude;
//纬度
latitude = position.coords.latitude;
document.getElementById('lng1').value = longitude;
document.getElementById('lat1').value = latitude;
//alert(longitude);
//$("#lng1").html(longitude);
//$("#lat1").html(latitude);
}
//失败时
function onError(error){
switch(error.code){
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误,位置获取失败");
break;
}
}
3.通过获取的经纬度位置信息,计算距离
* 计算两组经纬度坐标之间的距离
* @param $lat1 纬度1
* @param $lng1 经度1
* @param $lat2 纬度2
* @param $lng2 经度2
* @param int $len_type 返回值类型(1-m 2-km)
* @param int $decimal 保留小数位数
* @return float
*/
function getDistance($lat1, $lng1, $lat2, $lng2, $len_type = 2, $decimal = 2)
{
$radLat1 = $lat1 * 3.1415926 / 180.0;
$radLat2 = $lat2 * 3.1415926 / 180.0;
$a = $radLat1 - $radLat2;
$b = ($lng1 * 3.1415926 / 180.0) - ($lng2 * 3.1415926 / 180.0);
$s = 2 * asin(sqrt(pow(sin($a / 2), 2) + cos($radLat1) * cos($radLat2) * pow(sin($b / 2), 2)));
$s = $s * 6378.137;
$s = round($s * 1000);
if ($len_type > 1) {
$s /= 1000;
}
return round($s, $decimal);
}
//计算距离,
$distance = getDistance($longitude,$latitude,$longitude1,$latitude1);
echo '距离目的地:'.$distance.'km';
完整演示下载代码在php环境下测试
补上百度云地址
链接:http://pan.baidu.com/s/1kVEw2SB 密码:bhc9