【百度地图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,);
二、创建两个可拖拽的标注
先创建点，再把标注创建在该点上。最后添加标注在地图上。
让标注可拖拽的方法是：
然后确定这两个标注可以拖拽。
代码如下：
//创建两个可以拖动的标注
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();
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;},""); //打印总路程
}});
//测距按钮
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】如何制作可拖拽的沿道路测距的更多相关文章
- 【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板？
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- 百度地图API 拖拽或点击地图位置获取坐标
function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...
- 【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- 借助百度地图API制作企业百度地图
做网站需要插入地图,可以借助百度地图API,具体步骤如下: 1.打开百度地图API的网址: http://api.map.baidu.com/lbsapi/creatmap/ 2.设置中心点 3. ...
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
随机推荐
- Python学习笔记20：server先进
我们不依赖于一个框架,CGI如果是,只能使用socket介面.他完成了一个可以处理HTTP要求Pythonserver. 基于,不管是什么的计算机的操作系统(推荐Linux)和Python该计算机可被 ...
- [原创].NET 业务框架开发实战之十 第一阶段总结，深入浅出，水到渠成（后篇）
原文:[原创].NET 业务框架开发实战之十 第一阶段总结,深入浅出,水到渠成(后篇) .NET 业务框架开发实战之十 第一阶段总结,深入浅出,水到渠成(后篇) 前言:接着上篇来. 系列文章链接: [ ...
- 右键菜单中的好友列表Ajax直接跳转请求到登陆页面
今天,我们正在做正确的菜单.当点击重命名Ajax要求,并且不发送数据的背景,但直接跳到主页. 我百思不得其解,后来我发现在头版的一个问题: <li><a href='#' oncli ...
- 如何从Terminal Command Line编译并运行Scope
Ubuntu SDK我们大部分的开发者是非常有效的.它甚至可以帮助我们进行在线调试.在这篇文章中,我们介绍了如何使用command line编译和执行我们scope. 1)创建一个主Scope 我们能 ...
- cocos2d-x v3.2环境配置(现在3.x版本号可以配置该)
这里介绍的是Windows环境下的cocos2d-x配置. 前提: •Windows 7+ •cocos2d-x v3.2版本号(能够在http://www.cocos2d-x.org/down ...
- android 反编译，反，注射LOG
反编译smali注射显示LOG该代码.以后使用: .class public Lnet/iaround/connector/DebugClass; .super Ljava/lang/Object; ...
- 【转】Jython简单入门
1. 用Jython调用Java类库 第一步.创建Java类 写一个简单的Java类,用Point来示例: import org.python.core.*; public class Point e ...
- Fizz-Buzz-Whizz
Fizz-Buzz-Whizz ThoughtWorks测试 问题描述: 1. 你首先说出三个不同的特殊数,要求必须是个位数,比如3.5.7. 2. 让所有学生拍成一队,然后按顺序报数. 3. 学生报 ...
- Android虚拟机器学习总结Dalvik虚拟机创建进程和线程分析
Dalvik调用一个成员函数时,虚拟机,假设发现,该成员函数是一个JNI办法,然后,它会直接跳转到其地址来运行.也就是说.JNI方法是直接在本地操作系统上运行的.而不是由Dalvik虚拟机解释器运行. ...
- bcp sqlcmd bulkinsert在unicode问题,Unexpected EOF encountered in BCP data-file
senario 进入sqlcmd使用:out xxx产生的数据文件,因为sqlcmd export to file 默认情况下,中国的乱码.因此,使用-u(unicode)开关 @echo off & ...