您的位置:首页 > 其它

百度地图自动提示,转经纬度,距离计算。

2017-09-18 09:53 162 查看
注:这个在百度地图API中有两种一种是后台调接口请求,一种是前端加密。我做时遇到了天真的以为前端就请求没有次数限制,后来才发现不是的,问管理员他们解释一些定位接口,计算经纬度接口js还是有次数限制的。其中有关有定位算距离。我之前看demo中用中文计算距离接口。后来发现用坐标反查时与实际距离相差颇大。一个地点直接反查到海里,闹个大笑话。后来用中文自动提示转经纬度,再利用经纬度计算距离就准确多了。其实还是接口的问题,调不同的接口它的精确度是不一样的,越精确就肯定有次数限制。

//申请百度api密匙 注:申请密匙时,应用类型此方式是浏览器端

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxxx"></script>

//外部引用计算距离

<script type="text/javascript" src="<c:url value='scripts/carOrder/distance.js'/>"></script>

页面部分

<tr><td><div id="container" > </div></td></tr>

<tr >

<td align="right" width="20%"><span class="red_font">*</span>地址:</td>

<td width="50%" colspan="3"><html:text property="carPickupservice.startPlace" styleId="carPickupservice.startPlace" size="25" maxlength="20" onblur="zuobiaoAll(),SetMap2();"></html:text> 到: <html:text property="carPickupservice.arrivePlace" styleId="carPickupservice.arrivePlace"
size="25" maxlength="20" onblur="zuobiaoAll(),SetMap2();"></html:text> 距离:<span class="span1" id="s_gongli" ></span> <span id="s_warm"></span></td>

</tr>

<html:hidden property="carPickupservice.startPlaceJWd" styleId="carPickupservice.startPlaceJWd"/>

 <html:hidden property="carPickupservice.arrivePlaceJWd" styleId="carPickupservice.arrivePlaceJWd"/>

js部分

//自动定位,自动提示功能

function baidutishi(startPlace,arrivePlace){
var map = new BMap.Map("container");

var origcity=$("input[name='origcity']").val();

var destcity=$("input[name='destcity']").val();

if($("input[name='carPickupservice.type']:checked").val()=="1"){ 
map.centerAndZoom(origcity,12);

var ac1 = new BMap.Autocomplete(    //建立一个自动完成的对象
{"input" : "carPickupservice.startPlace","location":map}
);

 var ac2 = new BMap.Autocomplete(    //建立一个自动完成的对象
{"input" : "carPickupservice.arrivePlace","location":map}
); 

}else if($("input[name='carPickupservice.type']:checked").val()=="0"){
map.centerAndZoom(destcity,12);
var ac1 = new BMap.Autocomplete(    //建立一个自动完成的对象
{"input" : "carPickupservice.startPlace","location":map}
);
var ac2 = new BMap.Autocomplete(    //建立一个自动完成的对象
{"input" : "carPickupservice.arrivePlace","location":map}
); } 

    document.getElementById("container").style.display="none";//去掉地图的标志

    ac1.setInputValue(startPlace);

    ac2.setInputValue(arrivePlace); 

}

//取经纬度

function zuobiaoAll(){
//设置坐标
if($("input[name='carPickupservice.type']:checked").val()=="0"){
tranlateZuo(document.getElementById("carPickupservice.startPlace"),'carPickupservice.startPlaceJWd');
tranlateZuo(document.getElementById("carPickupservice.arrivePlace"),'carPickupservice.arrivePlaceJWd');
}else if($("input[name='carPickupservice.type']:checked").val()=="1") {
tranlateZuo(document.getElementById("carPickupservice.startPlace"),'carPickupservice.startPlaceJWd');
tranlateZuo(document.getElementById("carPickupservice.arrivePlace"),'carPickupservice.arrivePlaceJWd');

}

//根据中文地址解析成经纬度坐标
function tranlateZuo(ofname,jiesong) {
  var map = new BMap.Map("container");
  var localSearch=new BMap.LocalSearch("map");
  
//var myGeo = new BMap.Geocoder();
var zuobiao=document.getElementById(jiesong);
var poi="";

if(ofname.value==""){zuobiao.value="";}
localSearch.setSearchCompleteCallback(function (searchResult) {
poi = searchResult.getPoi(0);
zuobiao.value = poi.point.lng + "," + poi.point.lat; 
});

localSearch.search(ofname.value);
 } 

//距离计算

function SetMap2() {
 
 
var map = new BMap.Map("container");//创建地图对象

    var oGl = document.getElementById("s_gongli");

    var swm = document.getElementById("s_warm");
/*oGl.innerText = "";
swm.innerText ="";*/

    var output = "";

    var As=$("input[name='carPickupservice.startPlaceJWd']").val().split(',')[0];

    var Ae=$("input[name='carPickupservice.startPlaceJWd']").val().split(',')[1];

    

    var Bs=$("input[name='carPickupservice.arrivePlaceJWd']").val().split(',')[0];

    var Be=$("input[name='carPickupservice.arrivePlaceJWd']").val().split(',')[1];

    

    var pointA = new BMap.Point(As,Ae);

    var pointB = new BMap.Point(Bs,Be);

    

   

    var searchComplete = function(results) {

      if (transit.getStatus() != BMAP_STATUS_SUCCESS) { return; }

      var plan = results.getPlan(0); //驾车方案 默认为0是最短时间 1最短距离 2是避开高速

      output += plan.getDistance(true);      //获取距离

      

    };

   

    

    

    var transit = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: "results", autoViewport: true },

      onSearchComplete: searchComplete,

      onPolylinesSet: function() { oGl.innerText = output;

   

    transit.search(pointA, pointB);

    document.getElementById("container").style.display="none";

    

  }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: