百度地图驾车/公交查询Demo（支持多起点多终点）

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>百度地图-驾车/公交查询</title>

    <link href="style/style.css" rel="stylesheet" type="text/css" />

    <script src="script/jquery.min.js" type="text/javascript"></script>

    <!-- http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0B3c1575c78bfb0d1c52a0660cae3491"></script>

</head>

<body>

    <div class="maincontain" id="test">

        <div class="eMapsInfo">

            <!--搜索控制-->

            <div class="eMapsTop">

                <span>线路查询</span> 从

                <input class="txt" type="text" value="东方明珠" id="fromPlace" />

                到<select id="endInput">

                    <option value="虹桥T1" selected="selected">虹桥T1</option>

                    <option value="虹桥T2">虹桥T2</option>

                    <option value="浦东机场">浦东机场</option>

                </select>

                驾车<input type="radio" name="rdo" checked="checked" value="0"> 公交<input name="rdo"

                    value="1" type="radio">

                <input type="button" value="查询" id="btnSearch" />

            </div>

            <!--地图-->

            <div class="eMaps">

                <div class="boxmap" id="container">

                </div>

            </div>

            <!--右侧选项-->

            <div class="boxpanel" id="box">

                <h5>

                    起点选择 <a href="javascript:void(0)" id="btnExpand">(展开)</a></h5>

                <div id="startPanel">

                </div>

                <div id="drivingPanel">

                </div>

            </div>

            <div class="clear">

            </div>

        </div>

    </div>

    <script type="text/javascript">

        var setindex = 0;

        var map = new BMap.Map("container");            // 创建Map实例

        var point = new BMap.Point(121.357522, 31.193063);    // 创建点坐标

        var marker = new BMap.Marker(point);  // 创建标注

        map.addOverlay(marker);              // 将标注添加到地图中

        map.centerAndZoom(point, 12);         // 初始化地图,设置中心点坐标和地图级别。

        map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10) }));

        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件

        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件

        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

        map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }));

        var sContent =

"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>上海机场（集团）有限公司  </h4>" +

"<p style='margin:0;line-height:1.5;font-size:13px;'>地址：中国上海虹桥国际机场迎宾二路200号<br/>电话：86 21 6269 2200</p>" +

"</div>";

        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象

        map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

        function getInfoW(obj) {

            var startInfowin = new BMap.InfoWindow("</br>" + obj.title + "</br>" + obj.address + "<p class='t-c'><input value='选为起点' type='button'    onclick='startDeter();' /></p>");

            return startInfowin;

        }

        function getInfoW_M(obj) {

            startPoint = obj.point;

            map.openInfoWindow(getInfoW(obj), obj.point);

        }

        var startResults = null;

        var startPoint;

        var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'} });

        var driving_trans = new BMap.TransitRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'} });

        var startOption = {

            onSearchComplete: function (results) {

                // 判断状态是否正确

                if (startSearch.getStatus() == BMAP_STATUS_SUCCESS) {

                    startResults = results;

                    var s = [];

                    map.clearOverlays();

                    for (var i = 0; i < results.getCurrentNumPois(); i++) {

                        s.push("<div><p><a onmouseover='getInfoW_M(startResults.getPoi(" + i + "))' href='#'>");

                        s.push(results.getPoi(i).title);

                        s.push("</a></p><p>");

                        s.push(results.getPoi(i).address);

                        s.push("</p></div>");

                        var marker_c = new BMap.Marker(results.getPoi(i).point);

                        (function () {

                            var cur = i;

                            var mak = marker_c;

                            mak.addEventListener("click", function () {

                                startPoint = results.getPoi(cur).point;

                                this.openInfoWindow(getInfoW(results.getPoi(cur)));      // 打开信息窗口

                            });

                        })();

                        map.addOverlay(marker_c);              // 将标注添加到地图中

                    }

                    document.getElementById("startPanel").innerHTML = s.join("");

                } else { startResults = null; alert("没有搜索到路线，请确定起点是否有效!"); }

            }

        };

        //取得交通方式

        function getType() {

            var value = "";

            var radio = document.getElementsByName("rdo");

            for (var i = 0; i < radio.length; i++) {

                if (radio[i].checked == true) {

                    value = radio[i].value;

                    break;

                }

            }

            return value;

        }

        function startDeter() {

            map.clearOverlays();

            var marker = new BMap.Marker(startPoint);

            map.addOverlay(marker);

            map.addOverlay(new BMap.Marker(point));

            if (setindex == 0) {

                driving.search(startPoint, point);

            } else {

                driving_trans.search(startPoint, point);

            }

            document.getElementById("startPanel").style.display = "none";

        }

        //创建2个搜索实例

        var startSearch = new BMap.LocalSearch(map, startOption);

        //搜索按钮

        $("#btnSearch").click(function () {

            setindex = getType();

            var fromPlace = document.getElementById("fromPlace").value;

            startSearch.search(fromPlace);

            var toPlace = $("#endInput").val();

            switch (setindex) {

                case "0":

                    driving.search(fromPlace, toPlace);

                    break;

                case "1":

                    driving_trans.search(fromPlace, toPlace);

                    break;

            }

            document.getElementById("box").style.display = "block";

            document.getElementById("startPanel").style.display = "block";

        });

        //控制收起/展开

        $("#btnExpand").click(function () {

            $(this).text($(this).text() == "(收起)" ? "(展开)" : "(收起)");

            if ($(this).text() == "(收起)") {

                $("#startPanel").show();

            } else {

                $("#startPanel").hide();

            }

        });

    </script>

</body>

</html>

css：

body

{

    font-size: 12px;

}

#startPanel p, #endPanel p

{

    margin: 0;

    padding: 0;

    line-height: 1.2em;

}

#startPanel div, #endPanel div

{

    padding: 5px;

}

#startPanel, #endPanel

{

    border: 1px solid #FA8722;

    font-size: 12px;

}

 h5 {

line-height: 3em;

padding: 0;

margin: 0;

}

.boxpanel

{

    width: 167px;

    float: right;

    border: 1px solid gray;

    padding: 0 2px 10px;

    height: 502px;

    overflow-y: auto;

}

#container

{

    width: 100%;

    height: 100%;

    overflow: hidden;

    margin: 0;

}

.eMapsInfo

{

    width: 737px;

    margin: 0 auto;

    padding: 20px 0;

    position: relative;

}

.eMaps

{

    border: 6px solid #d2e0ee;

    background: #fff;

    height: 502px;

    width: 552px;

    float: left;

}

.eMapsTop

{

    height: 30px;

    padding-top: 20px;

    color: #333333;

    font-size: 14px;

}

.boxpanel

{

    width: 167px;

    float: right;

    border: 1px solid gray;

    padding: 0 2px 10px;

    height: 502px;

    overflow-y: auto;

}

jquery用的1.4.2

打包下载：http://download.csdn.net/detail/a497785609/6878687

百度地图驾车/公交查询Demo（支持多起点多终点）的更多相关文章

iOS 百度地图小的特点demo
先上图的样子 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDEyMzIwOA==/font/5a6L5L2T/fontsize/400/fill ...
使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置
最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...
百度地图api公交路线，IE下跳转百度地图后中文变成乱码的解决办法
百度开放的公交路线的链接,IE跳转会出现中文变成乱码的问题.如图: //创建InfoWindow function createInfoWindow() { var desDiv = []; desD ...
百度地图二次开发Demo
单点标注:电子显示对应位置的图片,信息框多点标注(批量点标注): 多点连线(基于多个点形成路径): 若须要Demo源码:请给我发邮箱 1507026255@qq.com 转载请注明小刘
Android百度地图相关内容汇总
Android百度地图知识讲解 1.百度地图开发环境搭建 http://www.apkbus.com/android-116050-1-1.html 2.Android百度地图系列教程 h ...
【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航
原文:[百度地图API]圣诞节里不会迷路的麋鹿--驾车导航任务描述: 可能大家还不知道,圣诞老人是爱迷路的老爷爷! 今年圣诞节又要到了,圣诞老人又要出来送礼物了.可是,他灰常的迷路呢! 还好,他有一 ...
【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
【百度地图API】让用户选择起点和终点的驾车导航
原文:[百度地图API]让用户选择起点和终点的驾车导航摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...
【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行
先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...

随机推荐

SpringSecurity3整合CAS实现单点登录
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
1Password:让一个密码记住所有密码
在这个信息大爆炸的时代,我们总有着各种各样的缘由,接触到各种各样的网站和爱屁屁,随之而来的,产生了大量的账号和密码. 每次新注册一个网站的时候,总会纠结一番:到底是新编一个密码呢?还是沿用之前的那一个 ...
Linux进程间通信:管道,信号量,消息队列,信号,共享内存,套接字
Linux下的进程通信手段基本上是从UNIX平台上的进程通信手段继承而来的.而对UNIX发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心)在进程间 ...
在flask中使用jsonify和json.dumps的区别
转载:https://blog.csdn.net/Duke_Huan_of_Qi/article/details/76064225
poj 3258 River Hopscotch 题解
[题意] 牛要到河对岸,在与河岸垂直的一条线上,河中有N块石头,给定河岸宽度L,以及每一块石头离牛所在河岸的距离, 现在去掉M块石头,要求去掉M块石头后,剩下的石头之间以及石头与河岸的最小距离的最大值 ...
用mappedbytebuffer实现一个持久化队列【转】
自从前段时间的一个事故让队列里缓存的大量关键数据丢失后,一直琢磨着弄一个能持久化到本地文件的队列,这样即使系统再次发生意外,我也不至于再苦逼的修数据了.选定使用mappedbytebuffer来实现, ...
java中读取配置文件中的数据
1.先在项目中创建一个包(如:config),再创建一个配置文件(如:a.properties),添加配置信息如下:比如:name=kakaage=28 2.代码:import java.io.IOE ...
EasyUI-window包含一个iframe，在iframe中如何关闭window
我试过类似$('#win').window('close');报$.data...options无效的错误,我已经引入了js文件,路径没问题,而且在同一个页面,不用iframe是可以关闭的在ifra ...
linux CentOS6.5 yum安装mysql 5.6（转载&删改）
按:下面文章经过我一路测试没有问题,是篇好文,在此感谢作者别踩我袈裟 .另因原文有些啰嗦,我自己有所删改,并尾后增加了一大段. 出处:https://www.cnblogs.com/renjido ...
Dreamweaver界面主要菜单功能介绍
启动界面有四个功能:主要使用新建HTML,其中HTML有很多版本,由于国内IE6.0占据了将近百分之七十的比例,所以最新的HTML1.1对他支持的不好,我们主要使用XHTML 1.0 Transiti ...

百度地图 驾车/公交查询Demo（支持多起点多终点）

百度地图 驾车/公交查询Demo（支持多起点多终点）的更多相关文章

随机推荐

热门专题

百度地图驾车/公交查询Demo（支持多起点多终点）

百度地图驾车/公交查询Demo（支持多起点多终点）的更多相关文章