當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【百度地图API】如何制作可拖拽的沿道路测距

發布時間：2024/9/20 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了【百度地图API】如何制作可拖拽的沿道路测距小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

摘要：

地圖測距，大家都會，不就map.getDistance麼。可是，這只能測任意兩點的直線距離，用途不夠實際啊。比如，我想測試北京天安門到北京后海的距離，怎么辦呢？

顯然“沿道路測距”就顯得尤為重要了。那么如果制作“可拖拽”的沿道路測距呢？我們一起來看一看。

---------------------------------------------------------------------------------------

一、創建地圖

只需要三步，即可創建一張地圖。示例：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);

二、創建兩個可拖拽的標注

先創建點，再把標注創建在該點上。最后添加標注在地圖上。

讓標注可拖拽的方法是：

然后確定這兩個標注可以拖拽。

代碼如下：

//創建兩個可以拖動的標注
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(); //標注可拖拽的設置
m2.enableDragging();

三、沿道路測距

創建駕車導航，在回調函數里設置距離的輸出。

寫個函數用來打開測距功能。

注意：起點和終點，要從改變位置后的marker里取。類參考如下：

代碼如下：

//駕車導航用來計算沿道路的距離
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"); //打印總路程
}});

//測距按鈕
function myFigure(){
transit.search(m1.getPosition(), m2.getPosition()); //兩個紅色標注之間的沿道路測距
}

四、清除結果

為了下一次的測距，我們需要清除這一次的導航結果，和測距結果。

代碼如下：

//重新測距的按鈕
function myClear(){
transit.clearResults(); //清除導航結果
document.getElementById("myDistance").innerHTML =""; //清除總路程的文字
}

五、網頁結構

需要寫兩個安妮，一個用來計算距離，另一個用來清除數據。

還有一個展示測距結果的容器。

<input type="button" value="重新開始" onclick="myClear();"/>
<input type="button" value="計算距離" onclick="myFigure();"/>
<p>總路程是：<span id="myDistance"></span></p>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>使用說明：</p>
<ol>
<li>紅色標注可拖拽</li>
<li>點擊“計算距離”按鈕，開始測距。結果用紅色文字標出</li>
<li>點擊“重新開始”按鈕，清除測距結果</li>
</ol>

六、全部源代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>可拖拽的沿道路測距</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="計算距離" onclick="myFigure();"/>
<p>總路程是：<span id="myDistance"></span></p>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>使用說明：</p>
<ol>
<li>紅色標注可拖拽</li>
<li>點擊“計算距離”按鈕，開始測距。結果用紅色文字標出</li>
<li>點擊“重新開始”按鈕，清除測距結果</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);

//創建兩個可以拖動的標注
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(); //標注可拖拽的設置
m2.enableDragging();

//駕車導航用來計算沿道路的距離
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"); //打印總路程
}});

//測距按鈕
function myFigure(){
transit.search(m1.getPosition(), m2.getPosition()); //兩個紅色標注之間的沿道路測距
}

//重新測距的按鈕
function myClear(){
transit.clearResults(); //清除導航結果
document.getElementById("myDistance").innerHTML =""; //清除總路程的文字
}
</script>

七、測兩點的直線距離

百度地圖API的官網上，有一個lib，是測試直線距離的。所以，這里就不多說了。

鏈接：http://dev.baidu.com/wiki/map/index.php?title=lib/DistanceTool

總結

以上是生活随笔為你收集整理的【百度地图API】如何制作可拖拽的沿道路测距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。