HTML——百度地图判断两点间的距离并做判断

本示例代码将在jquery基础库上实现。

key用的是百度地图，在创建应用时，我选择的是H5应用，应用在浏览器端，白名单记得要填*，这样可以适用于所有场景。

具体Demo，百度平台很详细，我的应用场景主要在于比较两点间的距离，不同的地理定位展示不同的图片。

先来看下HTML，很简单的两行

<div id="allmap"></div>
<div id="showImg"></div>

CSS没有相关的代码，自己修改的吧。

主要是JS，实现步骤为：写好一个定位（这个是用来做比较的中心点）；获取用户当前经纬度；判断两点间的距离。

由于本项目涉及了两个地点（经纬度均已稍作改动）的距离判断，所以有了pointA、pointC。

        //地图定位
        var $allmap = $("#allmap");
        var $showImg = $("#showImg");
        var map = new BMap.Map("allmap");  //创建地图
        var pointA = new BMap.Point(116.02662744,36.75329789);  //创建pointA坐标点
        var pointC = new BMap.Point(110.793606,33.63409);   //创建pointC坐标点
        map.centerAndZoom(pointA,12);  //打开本页面将进入pointA坐标点为中心的，大小为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);
       var pointB = new BMap.Point(r.point.lng,r.point.lat);  //用户当前的位置
       var distanceA = map.getDistance(pointA,pointB).toFixed(2);  //用户与pointA的距离
       var distanceB = map.getDistance(pointA,pointC).toFixed(2);  //用户与pointC的距离
       console.log(JSON.stringify(pointA));  //JSON.stringify：从一个对象中解析出字符串
       console.log(JSON.stringify(pointB));
       console.log(distanceA);
       console.log(distanceB);
        if(distanceA <= 50000){  //JS为弱类型语言，
                                 //所得distanceA是数字字符串，
                                 //可以直接判断distanceA与设定的距离大小
           $allmap.hide();
           $showImg.show();
           $showImg.css("background-image","url(pointA图片地址)");
        }else if(distanceC <= 50000){
           $allmap.hide();
           $showImg.show();
           $showImg.css("background-image","url(pointC图片地址)");
        }
    }
    else {
        alert('failed'+this.getStatus());
     }
 },{enableHighAccuracy: true})

以上是判断两点间的距离，不同的城市展示不同的图片，目前只是两个，可以在JS里实现，当然，若是实现多个城市，还是得和后台配合。