1. 程式人生 > >百度地圖API ajax非同步獲取資料庫資訊 頁面顯示多點標註和標註框

百度地圖API ajax非同步獲取資料庫資訊 頁面顯示多點標註和標註框

    var map = new BMap.Map("allmap");          // 建立地圖例項  
    var point = new BMap.Point(108.955665, 34.274037);  // 建立點座標  
    map.centerAndZoom(point, 15);                 // 初始化地圖,設定中心點座標和地圖級別
    map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
    
    
    $(function(){
        $.ajax({
            url:"${pageContext.request.contextPath }/yeeving/getTCiwsYeeving",
            type:"get",
            success:function(result){
                var lng = result.extend.tCiwsYeevingList[0].longitude;
                var lat = result.extend.tCiwsYeevingList[0].lat;
                console.log(result);
                //var point = new BMap.Point(108.95394, 34.27165);
                $.each(result.extend.tCiwsYeevingList,function(index,item){
                    
                var point = new BMap.Point(item.longitude,item.lat);
                var content = item.address;
                console.log(content);
                map.centerAndZoom(point, 15);    
                var marker = new BMap.Marker(point);        // 建立標註    
                map.addOverlay(marker);
                addClickHandler(content,marker);
                
                });
            }
        });
    });
    var opts = {
            width : 250,     // 資訊視窗寬度
            height: 80,     // 資訊視窗高度
            title : "資訊視窗" , // 資訊視窗標題
            enableMessage:true//設定允許資訊窗傳送短息
           };
    
    
    //點選將資訊內容加入白標註中
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 建立資訊視窗物件
        map.openInfoWindow(infoWindow,point); //開啟資訊視窗
    }