【百度地图API】如何制作可拖拽的沿道路测距
摘要：
地圖測(cè)距，大家都會(huì)，不就map.getDistance麼。可是，這只能測(cè)任意兩點(diǎn)的直線距離，用途不夠?qū)嶋H啊。比如，我想測(cè)試北京天安門到北京后海的距離，怎么辦呢？
顯然“沿道路測(cè)距”就顯得尤為重要了。那么如果制作“可拖拽”的沿道路測(cè)距呢？我們一起來(lái)看一看。
---------------------------------------------------------------------------------------
一、創(chuàng)建地圖
只需要三步，即可創(chuàng)建一張地圖。示例：http://dev.baidu.com/wiki/static/map/API/examples/index.html?
//初始化地圖var map =new BMap.Map("container");
var point =new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
二、創(chuàng)建兩個(gè)可拖拽的標(biāo)注
先創(chuàng)建點(diǎn)，再把標(biāo)注創(chuàng)建在該點(diǎn)上。最后添加標(biāo)注在地圖上。
讓標(biāo)注可拖拽的方法是：
然后確定這兩個(gè)標(biāo)注可以拖拽。
代碼如下：
//創(chuàng)建兩個(gè)可以拖動(dòng)的標(biāo)注var p1 =new BMap.Point(116.388398,39.897445);
var p2 =new BMap.Point(116.331398,39.836445);
var m1 =new BMap.Marker(p1);
var m2 =new BMap.Marker(p2);
map.addOverlay(m1);
map.addOverlay(m2);
m1.enableDragging(); //標(biāo)注可拖拽的設(shè)置
m2.enableDragging();
三、沿道路測(cè)距
創(chuàng)建駕車導(dǎo)航，在回調(diào)函數(shù)里設(shè)置距離的輸出。
寫個(gè)函數(shù)用來(lái)打開測(cè)距功能。
注意：起點(diǎn)和終點(diǎn)，要從改變位置后的marker里取。類參考如下：
代碼如下：
//駕車導(dǎo)航用來(lái)計(jì)算沿道路的距離var searchComplete =function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ; }
var plan = results.getPlan(0);
output ="<b style='color:red;'>"+ plan.getDistance(true) +"</b>"; //獲取距離
}
var transit =new BMap.DrivingRoute(map, {renderOptions: {map: map},
onSearchComplete: searchComplete,
onPolylinesSet: function(){
setTimeout(function(){document.getElementById("myDistance").innerHTML = output;},"100"); //打印總路程
}});
//測(cè)距按鈕
function myFigure(){
transit.search(m1.getPosition(), m2.getPosition()); //兩個(gè)紅色標(biāo)注之間的沿道路測(cè)距
}
四、清除結(jié)果
為了下一次的測(cè)距，我們需要清除這一次的導(dǎo)航結(jié)果，和測(cè)距結(jié)果。
代碼如下：
//重新測(cè)距的按鈕function myClear(){
transit.clearResults(); //清除導(dǎo)航結(jié)果
document.getElementById("myDistance").innerHTML =""; //清除總路程的文字
}
五、網(wǎng)頁(yè)結(jié)構(gòu)
需要寫兩個(gè)安妮，一個(gè)用來(lái)計(jì)算距離，另一個(gè)用來(lái)清除數(shù)據(jù)。
還有一個(gè)展示測(cè)距結(jié)果的容器。
<input type="button" value="重新開始" onclick="myClear();"/><input type="button" value="計(jì)算距離" onclick="myFigure();"/>
<p>總路程是：<span id="myDistance"></span></p>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>使用說(shuō)明：</p>
<ol>
<li>紅色標(biāo)注可拖拽</li>
<li>點(diǎn)擊“計(jì)算距離”按鈕，開始測(cè)距。結(jié)果用紅色文字標(biāo)出</li>
<li>點(diǎn)擊“重新開始”按鈕，清除測(cè)距結(jié)果</li>
</ol>
六、全部源代碼
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>可拖拽的沿道路測(cè)距</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<input type="button" value="重新開始" onclick="myClear();"/>
<input type="button" value="計(jì)算距離" onclick="myFigure();"/>
<p>總路程是：<span id="myDistance"></span></p>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>使用說(shuō)明：</p>
<ol>
<li>紅色標(biāo)注可拖拽</li>
<li>點(diǎn)擊“計(jì)算距離”按鈕，開始測(cè)距。結(jié)果用紅色文字標(biāo)出</li>
<li>點(diǎn)擊“重新開始”按鈕，清除測(cè)距結(jié)果</li>
</ol>
</body>
</html>
<script type="text/javascript">
//初始化地圖
var map =new BMap.Map("container");
var point =new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
//創(chuàng)建兩個(gè)可以拖動(dòng)的標(biāo)注
var p1 =new BMap.Point(116.388398,39.897445);
var p2 =new BMap.Point(116.331398,39.836445);
var m1 =new BMap.Marker(p1);
var m2 =new BMap.Marker(p2);
map.addOverlay(m1);
map.addOverlay(m2);
m1.enableDragging(); //標(biāo)注可拖拽的設(shè)置
m2.enableDragging();
//駕車導(dǎo)航用來(lái)計(jì)算沿道路的距離
var searchComplete =function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ; }
var plan = results.getPlan(0);
output ="<b style='color:red;'>"+ plan.getDistance(true) +"</b>"; //獲取距離
}
var transit =new BMap.DrivingRoute(map, {renderOptions: {map: map},
onSearchComplete: searchComplete,
onPolylinesSet: function(){
setTimeout(function(){document.getElementById("myDistance").innerHTML = output;},"100"); //打印總路程
}});
//測(cè)距按鈕
function myFigure(){
transit.search(m1.getPosition(), m2.getPosition()); //兩個(gè)紅色標(biāo)注之間的沿道路測(cè)距
}
//重新測(cè)距的按鈕
function myClear(){
transit.clearResults(); //清除導(dǎo)航結(jié)果
document.getElementById("myDistance").innerHTML =""; //清除總路程的文字
}
</script>
七、測(cè)兩點(diǎn)的直線距離
百度地圖API的官網(wǎng)上，有一個(gè)lib，是測(cè)試直線距離的。所以，這里就不多說(shuō)了。
鏈接：http://dev.baidu.com/wiki/map/index.php?title=lib/DistanceTool
總結(jié)
以上是生活随笔為你收集整理的【百度地图API】如何制作可拖拽的沿道路测距的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 月咏几斗（说一说月咏几斗的简介）
- 下一篇： ueditor赋值