开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文:【百度地图API】如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼。可是,这只能测任意两点的直线距离,用途不够实际啊。比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然“沿道路测距”就显得尤为重要了。
+关注继续查看
原文:【百度地图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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Fury:一个基于JIT动态编译的高性能多语言原生序列化框架
Fury是一个基于JIT动态编译的多语言原生序列化框架,支持Java/Python/Golang/C++等语言,提供全自动的对象多语言/跨语言序列化能力,以及相比于别的框架最高20~200倍的性能。
542 0
【蓝桥真题5】带三百人训练了十天精选蓝桥真题,看看他们都练些什么(三门语言题解)(上)
【蓝桥真题5】带三百人训练了十天精选蓝桥真题,看看他们都练些什么(三门语言题解)
40 0
SwiftUI—如何制作循环动画并指定动画的循环次数
SwiftUI—如何制作循环动画并指定动画的循环次数
77 0
专访钟家鸣:开源锁仓,IOST要做什么?
开源锁仓,IOST要做什么?
1546 0
使用Spring+Junit4.4进行测试
http://nottiansyf.iteye.com/blog/345819 使用Junit4.4测试 在类上的配置Annotation @RunWith(SpringJUnit4ClassRunner.class) 用于配置spring中测试的环境 @ContextConfiguration(locations={"classpath:spring/applicationContext.x
1246 0
【百度地图API】如何制作泡泡放大镜?
原文:【百度地图API】如何制作泡泡放大镜? 任务描述:   我不喜欢API提供的缩放控件耶……   我能不能使用其他方式放大地图勒?     当然阔以啦!   现在就来教大家如何动手制作一个可爱的泡泡放大镜!   使用它,就可以放大地图上的任何细节啦~   如何实现:   创建主地图map1,在主地图上创建一个标注,并对标注添加一个信息窗口。
998 0
socket编程小问题:地址已经被使用——Address already in use
很多socket编程的初学者可能会遇到这样的问题:如果先ctrl+c结束服务器端程序的话,再次启动服务器就会出现Address already in use这个错误,或者你的程序在正常关闭服务器端socket后还是有这个问题。
2110 0
如何制作串口线!!!
RS-232接口又称之为RS-232口、串口、异步口或COM(通信)口。"RS-232"是其最明确的名称。 在计算机世界中,大量的接口是使用串口进行数据连接的,连接的硬体就是RS-232九芯电缆。要制作RS-232串口线首先要了解RS-232串口的引脚说明。
767 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载