谷歌地图的Javascript没有正确响应rails中的ajax请求

Question

在 Rails 中，我在 html 中有一堆“通知”，每个通知都有谷歌地图上相应标记的纬度和经度属性。当谷歌地图边界发生变化时，我向通知控制器发送一个 ajax 请求。它返回所有带有地图边界内坐标的通知，以及一个包含地图放置相应标记所需的所有信息的数组。

视图中的javascript：

var initialize, map, mapOptions;
var markers = [];

initialize = function() {
  mapOptions = {
    center: {lat: 51, lng: 0},
    zoom: 9
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
  google.maps.event.addListener(map, 'dragend', dealWithNewWindow);
  function dealWithNewWindow(event) {
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng};
    $.ajax({
      type     : 'POST',
      url      : '/maprequest', 
      dataType : 'script',
      data     :  {  NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng }
    });
  };
  dealWithNewWindow(e);
};

makeMarkers = function(markerArray) {
  // alert("Alert 1.");
  for (m = 0; m < markerArray.length; m++) {
    // alert("Alert 2.");
    (function(marka) {
      var goomap = google.maps;
      var marker = new goomap.Marker({
        map: map,
        position: new goomap.LatLng(marka.lat, marka.lng),
        infowindow: marka.infowindow,
        id: marka.id
      });
      markers.push(marker);
    }(
      markerArray[m]
    ));
  }
};

通知控制器显示操作：

def show
  respond_to do |format|
    format.html
    format.js do
      @notices = noticefeed
      @markers = []
      @notices.each do |notice|
        marker = Marker.new(notice.latitude, notice.longitude, notice.content, notice.id)
        @markers.push(marker)
      end
      gon.markers = @markers
    end
  end
end

private
  def noticefeed
    nelat = params[:NElatitude]
    swlat = params[:SWlatitude]
    nelng = params[:NElongitude]
    swlng = params[:SWlongitude]
    Notice.where("      latitude  < ?
                    AND latitude  > ?
                    AND longitude < ?
                    AND longitude > ?  ", nelat, swlat, nelng, swlng )
  end

show.js.erb：

$("#notice_list").html("<%= escape_javascript(render @notices) %>")
makeMarkers(gon.markers);

浏览器控制台显示 ajax 已正确发送并且服务器响应没有问题。 $("#notice_list").html("<%= escape_javascript(render @notices) %>") 行提供了正确的 html。问题是地图上的标记没有创建或更新。 （我使用 gon 在 rails 和 jquery 之间进行通信）。当我取消注释 alert("Alert 1."); 时，会出现警报，这意味着它正在成功调用 makeMarkers 方法，但 alert("Alert 2."); 在它是唯一未注释的情况下永远不会出现。因此 makeMarkers 被调用，但它从未进入for (m = 0; m < markerArray.length; m++) 循环。因此，通过gon.markers 一定不会高兴。 为什么地图标记没有更新？

编辑：

在 show.js.erb 中，当我将 makeMarkers(gon.markers); 替换为 makeMarkers([1,2,3]) 时，它成功进入 for 循环（出现“警报 2”）。 gon.markers 一定有问题。 gon.markers 是在 ruby​​ 内的通知控制器中创建的数组，我是否必须以某种方式将其转换为 javascript 数组？我以为坤是为你做的？ 我使用调试器检查了 gon.markers 和 @markers 是数组或标记，它们是：

gon.markers：

[#<Mymodule::Marker:0x0000010ded1c38 @lat=51.9714995840941, @lng=-1.60000814589637, @infowindow="This is great!!", @id=904>]

所以当这个对象被交给 makeMarkers 时，出现了问题。

Answer 1

在我看来，您的 makeMarkers() js 函数没有将标记数组与您的地图画布相关联。

（我的代码与用 JavaScript 实现的谷歌地图 api 的结构不同，控制器中没有任何谷歌地图相关的内容。）

在您完成完整的标记数组推送后，您必须将标记数组与地图相关联。

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < your_marker_array.length; i++) {
    your_marker_array[i].setMap(map);
  }
}

显示标记：

    // Shows any markers currently in the array.
    function showMarkers() {
      setAllMap(map);
    }

为了完整起见，清除标记：

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}