【百度地图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

分类:  地图
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2013/04/07/3006514.html ,如需转载请自行联系原作者
相关文章
|
11天前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
142 0
|
9天前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
11天前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
67 0
|
11天前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
204 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
11天前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图,这3个怎么对起来?
DataWorks中API、desc、数据地图,这3个怎么对起来?
47 0
|
5月前
|
定位技术 API
百度地图API的使用教程以及案例(二)
百度地图API的使用教程以及案例
|
9天前
|
监控 安全 数据挖掘
Email 接口API有哪些?具体分析一下阿里云和AOK的优点
本文介绍了常见的Email接口API,如阿里云邮件推送、AOKSend、SendGrid、Mailgun和Amazon SES。阿里云API以其高稳定性和数据分析功能脱颖而出,支持批量发送和多语言;而AOKSend API以易于集成、高安全性和优秀客户支持为亮点。企业在选择时应考虑自身需求和预算,以优化邮件营销效果。
|
10天前
|
JSON 安全 API
解锁淘宝商品评论API接口:电商数据分析的新视角
淘宝商品评论API接口是淘宝开放平台提供的一组API接口,允许开发者通过编程方式获取淘宝商品评论数据。这些接口可以获取到商品的详细信息、用户评论、评分等数据,为电商数据分析提供了丰富的素材。
|
10天前
|
缓存 负载均衡 安全
探索API接口开发(定制与开发接口)
在当今数字化、互联互通的时代,API(应用程序编程接口)已经成为连接不同软件、服务和应用的关键桥梁。API接口开发,作为软件架构和系统设计的重要组成部分,不仅影响着数据交换的效率,更决定了整个系统的灵活性和可扩展性。本文将深入探讨API接口开发的各个方面,包括其重要性、开发流程、最佳实践以及面临的挑战。
|
11天前
|
文字识别 API 开发工具
印刷文字识别产品使用合集之API接口无法调用如何解决
印刷文字识别(Optical Character Recognition, OCR)技术能够将图片、扫描文档或 PDF 中的印刷文字转化为可编辑和可搜索的数据。这项技术广泛应用于多个领域,以提高工作效率、促进信息数字化。以下是一些印刷文字识别产品使用的典型场景合集。
38 6

热门文章

最新文章