百度地图API之如何制作驾车导航-阿里云开发者社区

百度地图API之如何制作驾车导航

2017-11-14 1819

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

让用户自己选择起点和终点呢？答案是，使用数据接口。数据接口，可以让百度地图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="驾车"onclick="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 onmouseover='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;}
}
};