Question

在rails中我在html中有一堆'notices'，每个'notices'都有谷歌地图上相应标记的纬度和经度属性。当Google地图边界发生变化时，我会向通知控制器发送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循环（出现“Alert 2”）。 gon.markers肯定有问题。 gon.markers是一个在ruby中的通知控制器中创建的数组，我是否必须以某种方式将其转换为javascript数组？我以为gon为你这样做了吗？我已经使用调试器检查过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实现的google maps 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);
}

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

1 个答案: