注:这个在百度地图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" οnblur="zuobiaoAll(),SetMap2();"></html:text> 到: <html:text property="carPickupservice.arrivePlace" styleId="carPickupservice.arrivePlace" size="25" maxlength="20" οnblur="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";
}