获取指定经纬度及当前位置经纬度,并计算两个位置之间的距离

利用百度地图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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值