Question

过去一周，我一直在这个街区附近，并没有找到一个有效的解决方案。我知道我遗漏了一些简单的东西，并且相信我需要在发布新数据集之前遍历每个现有标记以删除它们。

目标： 在页面加载时加载一组初始标记和infoWindows。更新通过ajax检索的新数据的标记和infoWindows并设置新的边界。

初始加载没问题，我通过ajax返回一组新数组，其数据集与初始地图标记和infoWindows具有相同的格式。我的想法是为初始地图加载使用相同的函数，然后简单地将新数据数组传递给同一个函数来更新地图。数据已通过，但我还无法删除或更新数据。

理论上，这是解决这个问题的可接受方式吗？如果是这样，我将如何删除现有标记并放置来自“新手”的更新标记。和＆＃39; newInfoWindowContent＆＃39;。

如果有更好的方法可以做到这一点，请...我全都耳朵！我开始创建一个小提琴，但我想首先得到关于程序的反馈，因为我觉得它很臃肿，可以简化。

提前谢谢大家！

= = = = =

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都是一个真正的混乱尝试使用简单的文本进行测试，如果它适用于你的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');

}

Ajax成功更新标记和infoWindows

1 个答案: