百度地图坐标定位和周边环境查找例子

百度API接口 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>    

地图面板:

 <div class="mapBox" id="mapDiv">                    

  </div>
                    <div class="periphery">
                        <div class="peripheryBd">
                            <h4>
                                周边查找:</h4>
                            <ul class="checkTag" id="hulMapCheckTag">
                                <li>
                                    <input name="gongjiao" id="ck_bus" type="checkbox" value="公交" /><label for="ck_bus">公交</label></li>
                                <li>
                                    <input name="ditie" id="ck_subway" type="checkbox" value="地铁" /><label for="ck_subway">地铁</label></li>
                                <li>
                                    <input name="house" id="ck_school" type="checkbox" value="学校" /><label for="ck_school">学校</label></li>
                                <li>
                                    <input name="yiyuan" id="ck_hospital" type="checkbox" value="医院" /><label for="ck_hospital">医院</label></li>
                                <li>
                                    <input name="yinhang" id="ck_bank" type="checkbox" value="银行" /><label for="ck_bank">银行</label></li>
                                <li>
                                    <input name="shop" id="ck_shop" type="checkbox" value="商场" /><label for="ck_shop">商场</label></li>
                            </ul>
                            <div class="peripheryBg">
                            </div>
                            <class="closePer"><span>关闭</span></a>
                        </div>
                    </div>

 JS代码:

var map = new BMap.Map("mapDiv", { zoomLevelMin: 8, zoomLevelMax: 18 });
$("div.periphery").show().appendTo("#mapDiv");
var local = "";
$(function () 

$("#hulMapCheckTag input[type=checkbox]").change(function () {
 //       var t = $(this).attr("name");
//        $(map.getOverlays()).each(function (i, n) {
//            if (n.iconDom.innerHTML.indexOf(t) > 0) {
//                map.removeOverlay(n);
//            }
//        });
        if ($(this).attr("checked") == true) {
            local.searchInBounds($(this).val(), map.getBounds());
        }
    });

ShowMap(); 

}) 


 

//百度地图
function ShowMap() {
    var lat = $("#htbLat").attr("value");
    var lng = $("#htbLng").attr("value");
    map.centerAndZoom(new BMap.Point(lng, lat), 16);
    //只需要放大和缩小
    map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_ZOOM }));
    //map.enableScrollWheelZoom();
    local = new BMap.LocalSearch(map, { onSearchComplete: searchComplete });     //构造一个查询   
    var point = new BMap.Point(lng, lat);
    var mk = new BMap.Marker(point);
    map.addOverlay(mk);
}

//查询完毕添加自定义标注
function addMarker(results, point, index) {
    var cantingIcon = new BMap.Icon("/Images/canting.png", new BMap.Size(17, 16));
    var ditieIcon = new BMap.Icon("/Images/ditie.png", new BMap.Size(17, 16));
    var shopIcon = new BMap.Icon("/Images/shop.png", new BMap.Size(17, 16));
    var yinhangIcon = new BMap.Icon("/Images/yinhang.png", new BMap.Size(17, 16));
    var yiyuanIcon = new BMap.Icon("/Images/yiyuan.png", new BMap.Size(17, 16));
    var houseIcon = new BMap.Icon("/Images/house.png", new BMap.Size(17, 16));
    var gongjiaoIcon = new BMap.Icon("/Images/gongjiao.png", new BMap.Size(17, 16));
    var myIcons = "";
    if (results.keyword == "学校") {
        myIcons = houseIcon;
    } else if (results.keyword == "餐厅") {
        myIcons = cantingIcon;
    } else if (results.keyword == "商场") {
        myIcons = shopIcon;
    } else if (results.keyword == "银行") {
        myIcons = yinhangIcon;
    }
    else if (results.keyword == "医院") {
        myIcons = yiyuanIcon;
    }
    else if (results.keyword == "地铁") {
        myIcons = ditieIcon;
    }
    else if (results.keyword == "公交") {
        myIcons = gongjiaoIcon;
    }
    else {
        myIcons = houseIcon;
    }

    var marker = new BMap.Marker(point.point, { icon: myIcons });

    var infoWindow = new BMap.InfoWindow(point.title);  // 创建信息窗口对象
    marker.addEventListener("mouseover",
            function () {
                marker.openInfoWindow(infoWindow);
            });    
    map.addOverlay(marker);
}

//查询完毕的回调函数
var searchComplete = function (results) {
    if (local.getStatus() != BMAP_STATUS_SUCCESS) {
        return;
    }
    //移除覆盖物
    //map.clearOverlays();
    //var lat = $("#htbLat").attr("value");
    //var lng = $("#htbLng").attr("value");
    //var point = new BMap.Point(lng, lat);
    //var mk = new BMap.Marker(point);
    //map.addOverlay(mk);
    for (var cnt = 0; cnt < results.getCurrentNumPois(); cnt++) {
        var point = results.getPoi(cnt);
        addMarker(results, point, cnt);
    }

}  


 

 

 

posted on 2012-03-28 11:16  ringwang  阅读(14341)  评论(1编辑  收藏  举报