百度地圖實現多點定位(包含兩種點：當前自己所在的位置和周圍需要查找的點 )

首先，要感謝下清山博客的博文 ，，， 鏈接地址：http://blog.csdn.net/a497785609/article/details/24009031

1、直接上圖，看看效果（本例中的座標數據爲前端假數據）

解釋一下大概實現的功能:(1)用戶訪問網頁時，定位到用戶當前的位置(圖中小熊頭像)，座標可由前端獲取或者後臺http傳入

（2）再搜索到用戶周圍的物流網點，物流網點座標數組由後臺傳入，前端再渲染

2、html代碼部分，很簡單（定義一個地圖容器即可）

     <!-- 地圖 -->
       <div class="map" id="map">
        </div> 

3、JS代碼部分

    var map; 
    //自己的座標(後臺傳入或者前端獲取)  
    var currentLat = 104.06374729999999;  
    var currentLon = 30.593283399999994;  
    var my ={ title: "自己的位置",tel:'13386975678'};  
    //需要展示的物流點位置(後臺傳入)
    var markerArr = [  
        { title: "測試位置1", point: "104.076338,30.584741",tel:'028-56789876'},  
        { title: "測試位置2", point: "104.058338,30.590103",tel:'028-98789999'}
    ];  
  
    function map_init() {  
        map = new BMap.Map("map");  
        //第1步：設置自己的座標(定位到當前城市)  
        var point = new BMap.Point(currentLat,currentLon);  
        //第2步：初始化地圖,設置中心點座標和地圖縮放級別。  
        map.centerAndZoom(point, 14);  
        //第3步：啓用滾輪放大縮小  
        map.enableScrollWheelZoom(true);  
        //第4步：向地圖中添加縮放控件  
        /*var ctrlNav = new window.BMap.NavigationControl({  
            anchor: BMAP_ANCHOR_TOP_LEFT,  
            type: BMAP_NAVIGATION_CONTROL_LARGE  
        });  
        map.addControl(ctrlNav);*/  
        //第5步：向地圖中添加縮略圖控件  
        /*var ctrlOve = new window.BMap.OverviewMapControl({  
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
            isOpen: 1  
        });  
        map.addControl(ctrlOve);*/  

        //第6步：向地圖中添加比例尺控件  
        /*var ctrlSca = new window.BMap.ScaleControl({  
            anchor: BMAP_ANCHOR_BOTTOM_LEFT  
        });  
        map.addControl(ctrlSca);  */
          
        //第7步：繪製物流點    
        for (var i = 0; i < markerArr.length; i++) {  
            var p0 = markerArr[i].point.split(",")[0];  
            var p1 = markerArr[i].point.split(",")[1];  
            //var maker = addMarkerCar(new window.BMap.Point(p0, p1), i); //第二個參數非必須(調用百度圖標時才添加)
            var maker = addMarkerCar(new window.BMap.Point(p0, p1));
            //添加貨車圖標  
            addInfoWindow(maker,markerArr[i]);   
        }  
        //繪製自己的座標和添加圖標
        //var mymaker = addMarkerPeople(new window.BMap.Point(currentLat, currentLon), 10);
        var mymaker = addMarkerPeople(new window.BMap.Point(currentLat, currentLon));
        addInfoWindow(mymaker,my);  
                
       // 添加信息窗口(可自定義樣式)
        function addInfoWindow(marker, poi) {
            //跳動動畫  
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
            //pop彈窗標題  
            var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';  
            //pop彈窗信息  
            var html = [];  
            html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');  
            html.push('<tr>');  
            html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">電話:</td>');  
            html.push('<td style="vertical-align:top;line-height:16px">' + poi.tel + ' </td>');  
            html.push('</tr>');  
            html.push('</tbody></table>');  
            var infoWindow = new BMap.InfoWindow(html.join(""),{title:title,width:160});
            //默認顯示自己的信息窗口
            marker.openInfoWindow(infoWindow); 
            var openInfoWinFun = function () {  
                marker.openInfoWindow(infoWindow);  
            };     
            //點擊座標點切換信息窗口 
            marker.addEventListener("click", openInfoWinFun); 
            
        }  
    }  
    // 添加標註圖標  
    function addMarkerCar(point,index) {  
        var myIcon = new BMap.Icon("img/car.png",  
        new BMap.Size(32, 22), { });
        var marker = new BMap.Marker(point,{ icon: myIcon });  
        map.addOverlay(marker);  
        return marker;    
    }
    function addMarkerPeople(point,index) {  
        var myIcon = new BMap.Icon("img/man.png",  
        new BMap.Size(27, 24), { });
        var marker = new BMap.Marker(point,{ icon: myIcon });  
        map.addOverlay(marker);  
        return marker;    
    }

    //異步調用百度js  
    function map_load() {  
        var load = document.createElement("script");  
        load.src = "http://api.map.baidu.com/api?v=2.0&ak=kayQ1GyV3fnCcDORPreyCKcGkXI6pYU0&callback=map_init";  
        document.body.appendChild(load);  
    }  
    window.onload = map_load;