百度地图API的调用

时间：2023-12-25 16:35:37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

        <title>地图 - 老*管理信息系统</title>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

        <style type="text/css">

        body{font-size:14px;}

        h5{line-height:3em;padding:;margin:;}

        .txt{border:1px solid #ccc;background:none;padding:1px; width:400px;}

        .f-l{float:left;}

        .t-c{text-align:center;}

        .clear{clear:both;}

        .hidden{display:none;}

        .searchbox{border:4px solid #e5ecf9;height:40px;float:left;line-height:40px;padding: 20px;margin:   50px;}

        .mainbox{margin:20px  ;}

        .boxmap{width:700px;height:500px;border:1px solid gray;float:left;}

        .boxpanel{width:250px;float:left;margin:   10px;border:1px solid gray;padding: 10px 10px;}

        #startPanel,#endPanel{border:1px solid #FA8722;font-size:12px;}

        #startPanel div,#endPanel div{padding:5px;}

        #startPanel p,#endPanel p{margin:;padding:;line-height:.2em;}

        #drivingPanel{border:1px solid #6688EE;}

        </style>

    </head>

    <body>

    <div>

        <!-- <img class="f-l" src="pictures/book.png" width="50px" height="50px" alt="老*管理信息系统"/> -->

        <div class="searchbox">

            位置：<input class="txt" type="text" value="*" id="searchPlace" />&nbsp;&nbsp;

            周边：<select

                id="aroundType">

                <option>医院</option>

                <option>学校</option>

                <option>超市</option>

                <option>银行</option>

            </select>

            <input type="button" value="搜索" id="btnSearch" onclick="doSearchPlace()" />

        </div>

    </div>

    <div class="clear"></div>

    <div class="mainbox">

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

        <div id="results" style="font-size:13px;margin-top:10px;"></div>

<div id="hospitalresults" style="font-size:13px;margin-top:10px;"></div>

    </div>

    </body>

</html>

<script type="text/javascript">

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

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

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

    map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。

    map.enableKeyboard();                         // 启用键盘操作。

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

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

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

    var searchresult;

    var local = new BMap.LocalSearch(map, {

        renderOptions: {

            map: map,

            panel: "results"

        },

        onSearchComplete: function (results) {

            // 判断状态是否正确

            if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult = results;

            else searchresult = null;

        }

    });

    var searchresult2;

    var local2 = new BMap.LocalSearch(map, {

        renderOptions:

    {

        map: map,

        panel: "hospitalresults"

    },

    onSearchComplete: function (results) {

        // 判断状态是否正确

        if (local.getStatus() == BMAP_STATUS_SUCCESS) searchresult2 = results;

        else searchresult2 = null;

    }

    });

    function doSearchPlace() {

        if (local.getResults() != null)

            local.clearResults();

        if (local2.getResults() != null)

            local2.clearResults();

        map.clearOverlays();

        var destination = document.getElementById("searchPlace").value;

        local.search(destination);

        local.setResultsHtmlSetCallback(function () {//加载完结果面板后调用

            if (searchresult == null) return false;

            var controls = document.getElementsByTagName("li");

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

                var spans = controls[i].getElementsByTagName("span");

                var arr = new Array();

                var p = searchresult.getPoi(i);

                if (p == null) continue;

                arr[] = searchresult.getPoi(i).point.lng;

                arr[] = searchresult.getPoi(i).point.lat;

                spans[].onclick = function () {

                    map.clearOverlays();

                    point.lng = arr[];

                    point.lat = arr[];

                    var circle = new BMap.Circle(point, , { strokeWeight: , fillOpacity: 0.5 });

                    map.addOverlay(circle);

                    var around = document.getElementById("aroundType");

                    var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());

                    local2.searchInBounds(around[around.selectedIndex].text, bounds);

                };

            }

        });

    }

    /**

    * 得到圆的内接正方形bounds

    * @param {Point} centerPoi 圆形范围的圆心

    * @param {Number} r 圆形范围的半径

    * @return 无返回值

    */

    function getSquareBounds(centerPoi, r) {

        var a = Math.sqrt() * r; //正方形边长

        mPoi = getMecator(centerPoi);

        var x0 = mPoi.x, y0 = mPoi.y;

        var x1 = x0 + a / , y1 = y0 + a / ; //东北点

        var x2 = x0 - a / , y2 = y0 - a / ; //西南点

        var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));

        return new BMap.Bounds(sw, ne);

    }

    //根据球面坐标获得平面坐标。

    function getMecator(poi) {

        return map.getMapType().getProjection().lngLatToPoint(poi);

    }

    //根据平面坐标获得球面坐标。

    function getPoi(mecator) {

        return map.getMapType().getProjection().pointToLngLat(mecator);

    }

</script>

相关文章