[转载]百度地图API如何制作“从这里出发”“到这里去”——公交篇

[转载]【百度地图API】如何制作“从这里出发”“到这里去”——公交篇 – 酸奶小妹 – 博客园.

摘要：

百度地图首页上的“从这里出发”“到这里去”，一直是开发者们很热衷的一个功能。那么，怎样结合百度的数据库，来制作这个功能呢？让我们一起来学习一下。

——————————————————————————————————————————————-

成品图如下：

———————————————————————————————————————————————

零、基础知识准备

首先，我们来看看公交方案的“从这里去”“到这里来”是怎么制作的。

需要创建一个公交方案，然后使用search功能。

细心的朋友们已经看到了，search接口的start和end参数，其实是可以输入point的。

那么，“从这里出发”到天安门，就应该是search（point，“天安门”）。

从天安门出发“到这里来”，就是search（“天安门”，point）了。

专业地说，这叫做“单边检索”。就是一个参数是string字符串类型，另一个是point经纬度类型。

而这个point，正是检索出来的结果。

————————————————————————————————————————————–

一、如何检索出地图数据

首先，创建一个检索对象。

var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});   //构造一个查询

然后使用检索方法，如下：

local.search("希尔顿逸林酒店");

下面，写回调函数。因为AJAX的异步机制，我们需要写回调函数，才能对检索成功后的数据进行操作。

我们写这样一个函数，当检索成功后，返回第一个点，并且利用这个点进行标注的添加。

注意：开发者可以返回多个点，使用循环即可。详见《如何更改百度信息窗口》，里面有返回所有第一页10个结果的代码。

var searchComplete = function (results){
    if (local.getStatus() != BMAP_STATUS_SUCCESS){
        return ;
    }
    var point = results.getPoi(0);
    addMarker(point);
}

标注的添加函数应该包含以下几个要点：

1、marker，就是标注的位置。（用户可自定义marker的图片，更改icon属性即可。见文章《自定义标注和信息窗口》）

2、infowindow，信息窗口信息。可以书写任意的htm内容。我取了百度数据库里的名称、地址、电话和经纬度信息。还放入了“从这里出发”“到这里去”的输入框。

3、添加标注。

4、重新设置中心点和地图级别。

//查询完毕添加自定义标注
function addMarker(point){
var marker = new BMap.Marker(point.point);
var infoWindow = new BMap.InfoWindow("
<div style="line-height: 1.8em; font-size: 12px;"><strong>名称:</strong>"+point.title+"
<strong>地址:</strong>"+point.address+"
<strong>电话:</strong>"+point.phoneNumber+"
<p style="border-top: 1px dashed #44aa99;"></p>
从这里到<input id="point_start" style="border: 1px solid #aaa; background: none;" type="text" value="天安门" /><input onclick="bus_start();" type="button" value="公交" />
从<input id="point_end" style="border: 1px solid #aaa; background: none;" type="text" value="天安门" />到这里<input onclick="bus_end();" type="button" value="公交" />

</div>
");  // 创建信息窗口对象
map.addOverlay(marker);
setTimeout(function(){map.centerAndZoom(point.point,14);marker.openInfoWindow(infoWindow);},500);
}

第一步完成以后，运行你的页面，就是这个样子啦：

————————————————————————————————————————————–

二、公交查询语句“从这里出发”和“到这里来”

首先，创建一个公交导航的对象。

map:map  是说，把公交线路图展现在map地图上。

panel:results  是说，把结果面板，展示在results里面。注意，这里要加上引号。

var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel : "results"}});

创建好之后，就开始做公交查询了。

把刚才取到的经纬度，做为起点或者终点，进行公交查询。

function bus_start(){
    transit.search(thisPoint , document.getElementById("point_start").value);
}
function bus_end(){
    transit.search(document.getElementById("point_end").value , thisPoint);
}

公交查询的结果将会显示在results里面。如下图：

————————————————————————————————————————————–

三、全部源代码

公交方案的单边检索
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript">
</script>

<input id="myPOI" type="text" value="希尔顿逸林大酒店" /><input onclick="poi_search();" type="button" value="查询地点" />

<script type="text/javascript">// <!&#91;CDATA&#91;
var thisPoint;
//查询完毕添加自定义标注
function addMarker(point){
    var marker = new BMap.Marker(point.point);
    var infoWindow = new BMap.InfoWindow("
<div style='line-height:1.8em;font-size:12px;'><b>名称:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>电话:</b>"+point.phoneNumber+"

从这里到<input type='text' id='point_start' value='天安门' style='border:1px solid #aaa;background:none;' /><input type='button' onclick='bus_start();' value='公交' /></br>从<input type='text' value='天安门' style='border:1px solid #aaa;background:none;' id='point_end' />到这里<input type='button' onclick='bus_end();' value='公交' /></div>
");  // 创建信息窗口对象
    map.addOverlay(marker);
    setTimeout(function(){map.centerAndZoom(point.point,14);marker.openInfoWindow(infoWindow);},500);
}

//查询完毕的回调函数
var searchComplete = function (results){
    if (local.getStatus() != BMAP_STATUS_SUCCESS){
        return ;
    }
    var point = results.getPoi(0);
    thisPoint = point;
    addMarker(point);
}

var map = new BMap.Map("container");    //创建地图容器
map.centerAndZoom(new BMap.Point(116.404, 39.915), 10); //初始化地图
map.enableScrollWheelZoom();  //启用滚轮缩放
var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});   //构造一个查询
var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel : "results"}});

//定义三个不同的查询
function poi_search(){
    map.clearOverlays();
    var POI = document.getElementById("myPOI").value;
    local.search(POI);
}
function bus_start(){
    transit.search(thisPoint , document.getElementById("point_start").value);
}
function bus_end(){
    transit.search(document.getElementById("point_end").value , thisPoint);
}
// &#93;&#93;></script>

————————————————————————————————————————————–

四、公交时间与距离

百度地图API的官网上有示例，请点击这里。

js大概是这样写的，如下：

 output += plan.getDuration(true) + "\n";             //获取时间
 output += plan.getDistance(true) + "\n";             //获取距离

————————————————————————————————————————————–

五、公交方案

有三种可选，较便捷、可换乘、少步行。请查看示例。

类参考如下：

————————————————————————————————————————————–

六、公交线路与公交站信息

查询例如，“104路电车”“975路”等公交车的信息，示例请看这里。

————————————————————————————————————————————–

七、不乘地铁的公交方案（新增）

做地铁是不是很贵啊？哈哈，查看示例，返回所有不乘地铁的公交方案。