项目实战:地图查询系统

2017-07-01 15:31:00
admin
原创
345
<!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>百度地图-应用Demo</title>
    <script src="http://code.ybao.org/demo/src/map/Static/common/js/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="http://code.ybao.org/demo/src/map/Static/common/js/Core.js" type="text/javascript"></script>
    <link href="http://code.ybao.org/demo/src/map/Static/common/css/Smoothness/style.css" rel="stylesheet" type="text/css" />    
    <script src="http://code.ybao.org/demo/src/map/Static/common/js/jquery-ui-1.8.7.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=15b289b6d5007ffa2c5257f245fa9853&v=1.1&services=true"></script>
    <style type="text/css">
        *
        {
            margin: 0px;
            padding: 0px;
        }
        
        a
        {
            text-decoration:none;
        }
        
        a:hover
        {
            color:#FF0000;
        }
        
        body
        {
            font-size: 12px;
            font-family: "Microsoft YaHei";
        }
        
        
        .clr
        {
            clear:both;
        }
        
        #tabs label
        {
            width: 80px;
            float: left;
        }
        
        .menu div
        {
            margin-bottom: 8px;
        }
        
        #topMenu ul
        {
            list-style-type: none;
        }
        #topMenu ul li
        {
            float: left;
            width: 80px;
            text-align: center;
        }
        
        #headerBar 
        {
            width: 100%; height: 35px; line-height: 35px;padding-left: 10px;
        }
        
        #headerBar div
        {
            float: left; text-align: center;
        }
        
        #content
        {
            margin: 0 auto; width: 1003px;
        }
        
        #mapContainer
        {
            width: 600px; height: 550px; border: #ccc solid 1px;float: left;
        }
        
        #mapControl
        {
            float: left; margin-left: 5px;
        }
        
        #tabs
        {
            width: 300px; margin-bottom: 3px;
        }
        
        #tabs .menuButton
        {
            text-align:right;
        }
        
        #mapResults
        {
            width: 306px; margin: 0px; padding: 0px; margin-left: 1px;
        }
        
        #footerBar
        {
            width: 1003px; margin: 0px auto; text-align: center; border-top: 1px dashed #b8b8b8;color: #b8b8b8; margin-top: 15px;"
        }
    </style>
</head>
<body>
    <!-- 页头 -->
    <div id="headerBar" class="ui-widget-header">
        <div id="logo">
            <a href="http://www.ybao.org" target=_blank>源宝ybao.org</a> </div>
        <div id="switchCity" >
        </div>
        <div id="topMenu">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="BMap.htm">地图Demo</a></li>
            </ul>
        </div>
    </div>
    <!-- 内容 -->
    <div id="content">
        <!--百度地图容器-->
        <div id="mapContainer">
        </div>
        <div id="mapControl">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">本地</a></li>
                    <li><a href="#tabs-2">公交</a></li>
                    <li><a href="#tabs-3">驾车</a></li>
                </ul>
                <div id="tabs-1" class="menu">
                    <div>
                        <label for="iptSearchFor">
                            搜索地点:</label>
                        <input id="txtSearchFor" name="searchFor" type="text" value="中关村" />
                    </div>
                    <div>
                        <label for="iptSearchFor">
                            在周围搜索:</label>
                        <input id="txtSearchNearby" type="text" value="小吃" /><br />
                    </div>
                    <div class="menuButton">
                        <input id="btnSearchFor" type="button" value="搜索" />
                    </div>
                </div>
                <div id="tabs-2" class="menu">
                    <div>
                        <label for="txtTransitStart">
                            起点:</label>
                        <input id="txtTransitStart" name="searchFor" type="text" value="北京站" />
                    </div>
                    <div>
                        <label for="txtTransitEnd">
                            终点:</label>
                        <input id="txtTransitEnd" type="text" value="西二旗" /><br />
                    </div>
                    <div class="menuButton">
                        <input id="btnSearchTransit" type="button" value="搜索" />
                    </div>
                </div>
                <div id="tabs-3" class="menu">
                    <div>
                        <label for="txtDrivingStart">
                            起点:</label>
                        <input id="txtDrivingStart" type="text" value="北京站" />
                    </div>
                    <div>
                        <label for="txtDrivingEnd">
                            终点:</label>
                        <input id="txtDrivingEnd" type="text" value="西二旗" /><br />
                    </div>
                    <div class="menuButton">
                        <input id="btnSearchDriving" type="button" value="搜索" />
                    </div>
                </div>
            </div>
            <div id="mapResults" >
            </div>
        </div>
    </div>
    <div class="clr"></div>
    <!-- 页脚 -->
    <div id="footerBar">
        copyright © 1999-2010 源宝 ybao.org All Rights Reserved.
    </div>
    <script type="text/javascript">
        var ThisPage = {
            initialize: function ()
            {
                /// <summary>
                /// 初始化
                /// </summary>
                $("#tabs").tabs();
                $("#btnSearchFor, #btnSearchTransit, #btnSearchDriving").button();

                this.map = new BMap.Map("mapContainer");
                var point = new BMap.Point(116.404, 39.915);
                this.map.centerAndZoom(point, 14);

                this.map.addControl(new BMap.NavigationControl());
                this.map.addControl(new BMap.ScaleControl());
                this.map.addControl(new BMap.OverviewMapControl());                
            },

            initializeEvent: function ()
            {
                $("#btnSearchFor").click(function (e)
                {
                    var searchFor = $("#txtSearchFor").val();
                    var searchNearby = $("#txtSearchNearby").val();

                    if (searchFor && !searchNearby)
                    {
                        this.local = new window.BMap.LocalSearch(this.map, {
                            renderOptions: { map: this.map, panel: "mapResults" }
                        });
                        this.map.clearOverlays();
                        this.local.search(searchFor);
                    }
                    else (searchFor && searchNearby)
                    {
                        this.local = new window.BMap.LocalSearch(this.map, {
                            renderOptions: { map: this.map, autoViewport: false, selectFirstResult: false },
                            pageCapacity: 1
                        });
                        this.map.clearOverlays();
                        this.local.setSearchCompleteCallback(this.onSearchComplete.proxy(this));
                        this.local.search(searchFor);
                    }
                } .proxy(this));

                $("#btnSearchTransit").click(function (e)
                {
                    var transitStart = $("#txtTransitStart").val();
                    var transitEnd = $("#txtTransitEnd").val();

                    if (transitStart && transitEnd)
                    {
                        var transit = new window.BMap.TransitRoute(this.map, {
                            renderOptions: { map: this.map, panel: "mapResults", autoViewport: true }
                        });
                        this.map.clearOverlays();
                        transit.search(transitStart, transitEnd);
                    }
                } .proxy(this));

                $("#btnSearchDriving").click(function (e)
                {
                    var drivingStart = $("#txtDrivingStart").val();
                    var drivingEnd = $("#txtDrivingEnd").val();

                    if (drivingStart && drivingEnd)
                    {
                        var driving = new window.BMap.DrivingRoute(this.map, {
                            renderOptions: { map: this.map, panel: "mapResults", autoViewport: true }
                        });
                        this.map.clearOverlays();
                        driving.search(drivingStart, drivingEnd);
                    }
                } .proxy(this));
            },

            onSearchComplete : function (results)
            {
                if (this.local.getStatus() == BMAP_STATUS_SUCCESS)
                {
                    var count = results.getCurrentNumPois();
                    if (count > 0)
                    {
                        var point = results.getPoi(0).point;
                        this.map.centerAndZoom(point, 16);

                        var local = new BMap.LocalSearch(this.map, {
                            renderOptions: { map: this.map, selectFirstResult: false, panel: "mapResults" },
                            pageCapacity: 20
                        });
                        this.map.clearOverlays();
                        local.searchInBounds($("#txtSearchNearby").val(), this.map.getBounds());
                    }
                }
            }
        };


        $(function ()
        {
            var thisPage = Class.create(ThisPage)
        });
    </script>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227