Ajax成功更新標記和信息窗口

Question

在過去的一週裏，我一直在圍繞這個塊，只是還沒有找到一個工作解決方案。我知道我錯過了一些簡單的東西，並且相信這是我需要在發佈新數據集之前遍歷每個現有標記以刪除它們。

目標： 加載頁面加載時的一組初始標記和infoWindows。更新通過ajax檢索的新數據的標記和信息窗口並設置新的邊界。

初始加載沒有問題，我通過ajax返回一組新的數組，其格式與初始地圖標記和infoWindows具有相同的格式。我的想法是對初始地圖加載使用相同的函數，然後將新的數據數組傳遞給相同的函數以更新地圖。數據已通過，但我無法刪除或更新數據。

從理論上講，這是一個可接受的方法來解決這個問題嗎？如果是這樣，我將如何去除現有的標記，並從'newMarkers'和'newInfoWindowContent'放置更新的標記。

如果還有更好的方法可以做到這一點，請......我都是耳朵！我開始創建一個小提琴，但想先獲得有關該過程的反饋，因爲我覺得它臃腫並且可以簡化。

謝謝大家提前！

= = = = =

jQuery(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyAqb3fT3SbMSDMggMEK7fJOIkvamccLrjA&callback=initialize"; 
    document.body.appendChild(script); 
}); 

function applyFilterMap (cabins) { 

    // Loop through old markers and set map to null for each. 
    // This is not working. 
    setMapOnAll(null); 

    markers = [] 
    //console.log(markers) 


    // Build the array of new markers from filtered results. 
    newMarkers = ''; 
    newMarkers += '['; 
    $.each(cabins, function(i, cabin) { 
    newMarkers += '[\''+ cabin.name + '\', ' + cabin.latitude + ', ' + cabin.longitude +'],' 
    }); 
    newMarkers = newMarkers.slice(0, -1); 
    newMarkers += ']'; 

    // Build the array of new infoWindowContent from filtered results. 
    newInfoWindowContent = ''; 
    newInfoWindowContent += '['; 
    $.each(cabins, function(i, cabin) { 
    newInfoWindowContent += '[\'<div class="property clearfix"><div class="image"><div class="content"><a href="'+ cabin.listing_url + '" onclick="ga(\'send\', \'event\', \'Destination-Listing\', \'Map - Photo\', \'' + cabin.destination + ' - ' + cabin.name + '\', 1);"><i class="fa fa-external-link"></i></a><img src="' + cabin.image_url + '" alt="' + cabin.name + '" class="img-responsive" onload="ga(\'send\', \'event\', \'Impression-MapPin\', \'' + cabin.property.destination.slug + '\', \'' + cabin.cabinid + '\', 1);"><span class="label-sleeps"><i class="fa fa-group"></i> ' + cabin.maxguests + '</span> <span class="label-price">$'+ cabin.minrate + '</span></div></div><div class="property-detail"><h5 class="title"><a href="' + cabin.list_url + '" onclick="ga(\'send\', \'event\', \'Destination-Listing\', \'Map - Name\', \'' + cabin.destination + ' - ' + cabin.name + '\', 1);">' + cabin.name + '</a></h5><h5>' + cabin.property.org.name + '</h5></div></div>\'],' 
    }); 
    newInfoWindowContent = newInfoWindowContent.slice(0, -1); 
    newInfoWindowContent += ']'; 

    // console.log(newMarkers); 
    // console.log(newInfoWindowContent); 

    initialize(newMarkers, newInfoWindowContent); 

    // Display the Map after it has been filtered and updated. 
    // $('#destinationMap_wrapper').html('<h3>New Map Here</h3>'); 
    $('#sizeMap').fadeIn('fast'); 
    $('#destinationMap_wrapper').fadeIn('fast'); 

} // END applyFilterMap() Function. 

/// Initialize Map for initial load. 
function initialize(newMarkers, newInfoWindowContent) { 

var map; 
var bounds = new google.maps.LatLngBounds(); 

var mapOptions = { 
    mapTypeId: 'roadmap', 
}; 

// Create Markers 
if(newMarkers) { 
    markers = newMarkers; 
} else { 
    markers = [ 
    ['The Encantado', 40.38917970, -105.46607810], 
    ['Valhalla', 40.35821830, -105.56307860], 
    ['Mountain Side', 40.39301450, -105.43687520], 
    ]; 
} 

// Info Window Content 
if(newInfoWindowContent) { 
    infoWindowContent = newInfoWindowContent; 
} else { 
    infoWindowContent = [ 
    ['<h3>The Encantado Info</h3>'], 
    ['<h3>Valhalla Info</h3>'], 
    ['<h3>Mountain Side Info</h3>'] 
    ]; 
} 

// Display map on the page 
map = new google.maps.Map(document.getElementById("destinationMap_canvas"), mapOptions); 

// Display markers on map 
var infoWindow = new google.maps.InfoWindow(), marker, i; 

// Loop through our array of markers & place each one on the map 
for(i = 0; i < markers.length; i++) { 
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers[i][0] 
    }); 

    // Create info window for each marker  
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      // map.setCenter(marker.getPosition()); 
      infoWindow.open(map, marker); 
     } 
    })(marker, i)); 

    // Automatically center the map fitting all markers on the screen 
    map.fitBounds(bounds); 
} 

// Override our map zoom level once our fitBounds function runs. 
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
    google.maps.event.removeListener(boundsListener); 
}); 

} 

function setMapOnAll(map1) { 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(map1); 
    } 
} 

Answer 1

的問題是在你applyFilterMap您所定義的newMarkers爲有一個數組（所以它不是一個數組）的表示的字符串，並在你的initilize方法你正在等待一個數組循環。它對newInfoWindowContent也是同樣的問題。你可以試試這樣的代碼

newMarkers = []; 
    $.each(cabins, function(i, cabin) { 
    newMarkers.push([ ''+cabin.name , cabin.latitude , cabin.longitude]) 
    }); 

並將相同的事情應用於newInfoWindowContent。但代碼將所有的DIV是一個真正的混亂嘗試用簡單的文字測試，如果它與一些清潔

UPDATE

適用於這裏的HTML是你的方法的一個可能的版本

function applyFilterMap (cabins) { 

    // Loop through old markers and set map to null for each. 
    // This is not working. 
    //setMapOnAll(null); 

    markers = [] 
    //console.log(markers) 


    // Build the array of new markers from filtered results. 
    newMarkers = []; 
    $.each(cabins, function(i, cabin) { 
    newMarkers.push([ ''+cabin.name , cabin.latitude , cabin.longitude]) 
    }); 

    // Build the array of new infoWindowContent from filtered results. 
    newInfoWindowContent = [] 
    $.each(cabins, function(i, cabin) { 
    var oneArray = ['<h3>'+cabin.name+'</h3>']; 
    newInfoWindowContent.push(oneArray); 
    }); 

    // console.log(newMarkers); 
    // console.log(newInfoWindowContent); 

    initialize(newMarkers, newInfoWindowContent); 

    // Display the Map after it has been filtered and updated. 
    // $('#destinationMap_wrapper').html('<h3>New Map Here</h3>'); 
    $('#sizeMap').fadeIn('fast'); 
    $('#destinationMap_wrapper').fadeIn('fast'); 

}