【百度地图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】如何制作可拖拽的沿道路测距相关推荐
- 调用百度地图API接口制作热力图
调用百度地图API接口制作热力图 Python学了很久,也做了一些机器学习的demo,利用matolotlib库做过一些可视化.今天呢想尝试做一下热力图.先PO一张我最终效果图. 因为数据原因,效果一 ...
- ArcGIS+百度地图API:制作杭州市边界shp文件
参考文章:百度地图API+ArcGIS软件-城市出行时空数据可视化_WenWu_Both的博客-CSDN博客 这篇博客在介绍的时候遗漏了很多关键步骤,我对此进行了必要的补充. 一.获取轮廓线的代码(g ...
- 【百度地图API】制作多途经点的线路导航
先创建一张地图的容器: <div class="pos-a" id="allmap"style="width: 100%; height: 95 ...
- 百度地图,开启marker点拖拽,并监听拖拽后的坐标位置
有的网站可能让用户自己移动marker点选择位置 这个时候 需要就来了 开启marker点的拖拽还是很简单的哈 其实开启拖拽的也是 BMapGL 版本的地图 这点要记住哈 var mar ...
- 百度地图添加标注及图标拖拽及给标注添加右键
功能要求:拖动地图上的图钉时,在某个位置进行标注.并给标注添加右键操作属性. [1]图标拖拽事件 var myIcon = new BMap.Icon("${ctx }/images/map ...
- 【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图 大家跟我一起来创建一张简单的地图: var map = new BMap.Map("container"); map.centerAndZoom(new BMap.P ...
- Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
- 【百度地图API】如何制作班级地理通讯录?LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- (转)【百度地图API】如何制作班级地理通讯录?LBS通讯录
原文地址http://www.cnblogs.com/milkmap/archive/2012/10/24/2735923.html 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复 ...
最新文章
- iOS自动签名打包(xcodebuild)----常用
- matlab中textread
- 如何在Debian 8/7上安装PostgreSQL 9.6
- SparkSQL 控制文件输出的大小
- oracle数据库 杀进程,数据库应急杀进程脚本
- 云+X案例展 | 金融类:荣之联助力君康人寿构建新一代数据中心
- 织梦dedecms内核自适应移动POS机刷卡机招商加盟企业网站源码
- 给DNS划重点:分析ISC BIND必知必会
- 树莓派教程 - 1.6 树莓派GPIO库wiringPi 外接USB串口ttyUSB ch340 cp2102
- laydate组件 无法传值_Vue组件间通信几种方式,你用哪种?【实践】
- 【笔记+代码】网格搜索-GridSearchCV
- ActiveX控件的注册方法
- USACO3.4 “破锣摇滚”乐队 Raucous Rockers - DP
- 因违反《竞业协议》,三年白忙活了!赔偿 97.6 万元,返还 15.8 万元
- 无损音乐知识收集3(转)
- 避免怀疑跳槽,程序员该怎么请假?
- 人生:越是低谷,越要努力
- C语言程序设计(第四版,建议复习用,无死角)
- Cocos2dx 菜单项控件-Menu
- 证金汇金券商股暴动,指数在大涨,机构们这样看20170828
热门文章
- C++实现深度优先搜索DFS(附完整源码)
- QT的QHash类的使用
- QT的QByteArray 类的使用
- 26.27.28.29.极区图(南丁格尔玫瑰图)、维恩图 (Venn diagram)、面状图(Area chart)、树地图
- 4.录屏软件录屏端和接收端程序
- Mysql 死锁过程及案例详解之记录锁与间隔锁Record Lock Gap Lock
- 处理数字_7_含NULL值的列的聚合
- 电机高频注入原理_永磁同步电机转子位置与速度估算的新方法,精度好,性价比高...
- java面试基础_Java面试基础
- 02-NVIDIA Jetson TX2 通过JetPack 3.1刷机完整版(踩坑版)