百度地图API之如何制作驾车导航
让用户自己选择起点和终点呢?答案是,使用数据接口。数据接口,可以让百度地图API的数据,按照自定义的形式展示。
这个功能非常实用,学会这个方法,可以让您的地图更加接近百度地图的功能!
一、创建地图与网页样式
创建一张简单的地图,只需要3句话。
- varmap =newBMap.Map("container"); //创建Map实例
- varpoint =newBMap.Point(116.404, 39.915); //创建点坐标
- map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。
然后,我们制作出两个输入框,分别是起点输入框,和终点输入框。
从<input class="txt"type="text"value="机场"id="startInput"/>到<input class="txt"type="text"value="西站"id="endInput"/> <input type="button"value="驾车"οnclick="mDriving()"/>
使用“驾车”按钮,获取输入框中的数据。
- functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value;}
二、创建搜索实例
对于起点和终点,我们需要创建2个不同的搜索实例:
- //创建2个搜索实例
- varstartSearch =newBMap.LocalSearch(map,startOption);varendSearch =newBMap.LocalSearch(map,endOption);
在点击“驾车”按钮后,开始搜索起点和终点都有哪些符合关键词的地方(POI点)。
- functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value;
- startSearch.search(startPlace);
- endSearch.search(endPlace);
- document.getElementById("box").style.display="block";
- }
三、搜索的数据接口
由于AJAX是异步加载的,我们使用百度地图API提供的回调函数onSearchComplete,来完成对搜索成功后的操作。
当搜索成功后,把每一个搜索结果(POI),按照我们自定义的方式,列在面板中。其实,这里我们只使用了数据接口,没用百度默认的结果面板。
- varstartOption ={
- onSearchComplete: function(results){//判断状态是否正确if(startSearch.getStatus() ==BMAP_STATUS_SUCCESS){
- startResults =results;vars =[];for(vari =0;i <results.getCurrentNumPois(); i ++){
- s.push("<div><p><a οnmοuseοver='map.openInfoWindow(startInfowin,startResults.getPoi("+i +").point);' href='#'>");
- s.push(results.getPoi(i).title);
- s.push("</a></p><p>");
- s.push(results.getPoi(i).address);
- s.push("</p></div>");
- }
- document.getElementById("startPanel").innerHTML =s.join("");
- }else{startResults =null;}
- }
- };
当用户鼠标移到起点面板的标题处,我们在地图上打开一个信息窗口。里面放“选为起点”的按钮。
- varstartInfowin =newBMap.InfoWindow("<p class='t-c'><input value='选为起点' type='button' onclick='startDeter();' /></p>");
用户点击“选为起点”的按钮后,选定该点为起点,并隐藏起点面板,让用户选择终点。
为了方便看清起点的位置,我们需要在地图上打个红色的标注。并且,再次选择起点时,要清楚上一次的标注。
- functionstartDeter(){
- map.clearOverlays();
- startPoint =startInfowin.getPosition();varmarker =newBMap.Marker(startPoint);
- map.addOverlay(marker);
- document.getElementById("startPanel").style.display="none";
- }
同理,制作终点的面板。这里需要注意的是,终点和起点不同,选择终点之后,需要创建一个驾车实例,并且绘制出驾车路线。
所以要做一个判断,用户是否已经选择了起点。如果没有,提示用户要先选择起点。
- functionendDeter(){ if(startPoint==null){alert("请先选择起点!");}else{
- endPoint =endInfowin.getPosition();
- driving.search(startPoint,endPoint);
- document.getElementById("endPanel").style.display="none";
- }
- }
四、创建驾车实例和结果面板
在选择完毕确定的终点和起点后,驾车的结果就明了了。
一句话,轻松搞定。
vardriving =newBMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});
五、页面样式完善
为了让页面干净好看,我们可以把不必要的结果展示暂时隐藏起来,当需要它们的时候,再展开。
1、比如,先把地图和搜索框以外的结果面板隐藏起来。
我使用了hidden样式,来隐藏右边的面板boxpanel。
- .hidden{display:none;}
- <div class="boxpanel hidden"id="box">中间省略</div>
对起点选择和终点选择面板,采取使用时“展开”,选取完毕即刻隐藏的办法。例如,
- <h5>起点选择 <a href="#"onclick="document.getElementById('startPanel').style.display='block';">(展开)</a></h5>
2、清除上次驾车查询结果
如果你要再次使用驾车查询,一定要先清除上次驾车查询的结果:driving.clearResults();
也可以使用clearOverlays,一次性清除地图上所有的覆盖物。map.clearOverlays();
另外,补充一个清除覆盖物的知识:
清除地图上所有的标记,用map.clearOverlays();
清除单个标注,用map.removeOverlay(marker);
显示和隐藏自定义覆盖物,可以继承overlay的hide();或者show()方法。
百度地图API之如何制作驾车导航相关推荐
- android 百度地图驾车导航,百度地图API详解之驾车导航
本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发. 一个简单的示例 驾车导航服务根据传入的起点和终点信息给出从起点到终点的驾车路线,我们先从一个最简单的示例看起: var map = ...
- 【百度地图API】如何制作班级地理通讯录?LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- 【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈
[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快 ...
- HTML5页面调用百度地图API,获取当前位置并导航到目的地
微信也可用, <!DOCTYPE html> <html lang="zh-cmn-Hans"><meta charset="UTF-8&q ...
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶×××要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
- 【百度地图API】如何制作可拖拽的沿道路测距
摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然"沿道路测距&q ...
- 百度地图API实现定位与目的地导航
前言:这是2012年9月份的文章,截止目前已过一年,并且百度LBS相关服务已经非常完善,通过官方Demo可以满足大家需求. 这是项目源码:下载,由于百度LBS相关组件已升级,建议到百度开发者中心查看官 ...
- android百度地图API 骑行,步行导航的DEMO以及途径点问题
android百度地图API的简单骑行,步行的导航demo,以及关于多个路径点问题的说明 ##注:目前基础百度地图API的步行以及骑行是不支持多个路径点的,只能单点对单点的,如果你真的想多个途径点导航 ...
- (转)【百度地图API】如何制作班级地理通讯录?LBS通讯录
原文地址http://www.cnblogs.com/milkmap/archive/2012/10/24/2735923.html 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复 ...
最新文章
- java数组去重_再谈JavaScript数组去重
- spark 源码分析之十三 -- SerializerManager剖析
- springAMQP
- catia v5法矢数据软件_catia介绍
- RBM/DBN训练中的explaining away概念
- Android官方开发文档Training系列课程中文版:高效显示位图之在非UI线程中处理图片
- HTML代码transform,html-transform+onmouseover代码实例
- php laravel 空白,php – Laravel View Make返回空白页面
- Python实现鸢尾花数据集分类问题——使用LogisticRegression分类器
- 【线性代数】1.6矩阵的特征值和特征向量
- OCR识别数学公式图片,获得原始公式代码
- C# Web页面打印网页
- openresty ngx_lua日志操作
- Visual Studio 2010 Win32 Usb HID 动态库创建
- Endnote 导出中英文参考文献到Word
- 伤感!!!!!!!!!!!!!!!
- 最简单可靠的机房温度电话报警
- 853. 有边数限制的最短路(bellman_ford算法)
- (CSP2019·J T4)加工零件【spfa】【最短路】
- Python 快速对比字符串的差异