原文:【百度地图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】如何制作可拖拽的沿道路测距的更多相关文章

  1. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  2. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  3. 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

    百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...

  4. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

  5. 【百度地图API】如何制作班级地理通讯录？LBS通讯录

    原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...

  6. 借助百度地图API制作企业百度地图

    做网站需要插入地图,可以借助百度地图API,具体步骤如下: 1.打开百度地图API的网址:   http://api.map.baidu.com/lbsapi/creatmap/ 2.设置中心点 3. ...

  7. 【百度地图API】如何利用PhoneGap制作地图APP

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  8. 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  9. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

随机推荐

  1. LINK : fatal error LNK1181: 无法打开输入文件“..\..\lib\Release\opencv_ocl249.lib”

    最近想要编译什么OpenCV资源.查看源代码调试执行. 按照网上的文章<Win7x64+VS2012+OpenCV2.4.3+CMake2.8.10+TBB41重编译OpenCV> 进行配 ...

  2. 在最完整的搜索提示降史上的用户交互的研究——阅读《An Eye-tracking Study of User Interactions with Query Auto Completion》

            搜索下拉提示(Query Auto Completion,简称QAC)如今差点儿是每一个搜索引擎必备的基本功能,作用是在用户在搜索框输入查询词的过程中,给用户展示一系列搜索查询quer ...

  3. KindEditor参数具体解释

    width 编辑器的宽度.能够设置px或%.比textarea输入框样式表宽度优先度高. 数据类型: String 默认值: textarea输入框的宽度 演示样例: K.create('#id',  ...

  4. Windowsport80解决方案被占用

    今天,在一个非常沮丧的实施Server什么时候,一个错误port80占用.因此,找到一种方法来解决各类.最后,我的解决方案列出的问题来,要遇到的人做一些参考同样的问题. 第一步,找出哪些程序正在使用p ...

  5. ssh: connect to host github.com port 22: Connection refused

    假设git例如,下面的问题时,远程推送: [fulinux@ubuntu learngit]$ git push -u origin master ssh: connect to host githu ...

  6. 第七章——DMVs和DMFs（1）

    原文:第七章--DMVs和DMFs(1) 简介: 从SQLServer2005开始,微软引入了一个名叫DMO(动态管理对象)的新特性,DMO可以分为DMFs(Dynamic Manage Functi ...

  7. JAVA基础实例（三）--排序

    冒泡排序 是一种简单的排序算法.它反复地走訪过要排序的数列,一次比較两个元素.假设他们的顺序错误就把他们交换过来.走訪数列的工作是反复地进行直到没有再须要交换,也就是说该数列已经排序完毕. 这个算法的 ...

  8. Android学习小Demo（19）利用Loader来实时接收短信

    之前写过一篇文章<Android学习小Demo(13)Android中关于ContentObserver的使用>,在里面利用ContentOberver去监測短信URI内容的变化.我们先来 ...

  9. Linux删除以破折号开头的文件Windows在批处理文件来删除隐藏属性

    昨天去打印店打印的材料.结果中毒.所有的文件被隐藏.生成一个一堆快捷键.回来后.我很容易地把它放入Linux机,我想删除这些文件怪. 下面是该过程,遇到的问题. 1.您无法删除'-'该文件的开头 最初 ...

  10. netfilter/iptables 结构要点

    转载请注明:http://blog.csdn.net/yeasy/article/details/44311169 四张表,每一个表有若干链. filter INPUT(路由表决策后,到本机的进程) ...