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

百度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>
                            <a 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);
    }

}  

 

 

 

转载于:https://www.cnblogs.com/ringwang/archive/2012/03/28/2420904.html