0

我正在使用 goolge maps 4 rails gem。

我正在尝试为鼠标悬停的每个标记打开信息窗口，并在鼠标移出时关闭。我无法让 infowindow.open 工作。

使用以下代码，我得到：未捕获的 ReferenceError：未定义信息窗口。我究竟做错了什么？这是添加此侦听器的正确位置吗，是否有内置方法可以节省代码？

<script type="text/javascript">

handler = Gmaps.build("Google", 
  { markers: 
    { clusterer: { 
        gridSize: 8,
        maxZoom: 12,
        styles: [ {
              textSize: 1,
              textColor: '#45A6DD',
              url: 'images/mapCluster.png',
              height: 51,
              width: 51 }      
            ]
      }
    } 
});

var image = 'images/marker.png';

handler.buildMap({
    provider: {
      zoom: 4,
      minZoom: 4,
      maxZoom: 13,
      draggable: true, 
      zoomControl: true, 
      scrollwheel: false, 
      disableDoubleClickZoom: true,
      disableDefaultUI: true,
      center: new google.maps.LatLng(37.8282, -98.5795),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: Maps.styles,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      }
    },
    internal: {
      id: 'map'
    }
  },
  function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    for (i = 0, len = markers.length; i < len; i++) {
      marker = markers[i].getServiceObject();
      google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.serviceObject.open(Gmaps.map.map, marker.serviceObject);
      });

    }
  }
);

</script>

不确定它是否相关，但这是我通过控制器操作传递的哈希：

@hash = Gmaps4rails.build_markers(@cities_for_map) do |city, marker|
  marker.infowindow render_to_string(:partial => "/destinations/map_tile.html", :locals => { :city => city})
  marker.lat city.latitude
  marker.lng city.longitude
  marker.picture({ 
    "url" => "/images/Marker.png",
    "width" => 20,
    "height" => 20 })
end

我在脚本中添加了以下内容

@MyMarker 类扩展了 Gmaps.Google.Builders.Marker

  create_infowindow_on_click: ->
    @addListener 'mouseover', @infowindow_binding

并更新了我的处理程序：

handler = Gmaps.build("Google",
      { markers: 
        { clusterer: { 
            gridSize: 8,
            maxZoom: 12,
            styles: [ {
                  textSize: 1,
                  textColor: '#45A6DD',
                  url: 'images/maps/cluster.marker.png',
                  height: 51,
                  width: 51 }      
                ]
          }
        },
        builders: {
          Marker: KhMarker
        }
    });

它现在可以工作了:)

4

1 回答 1

0

Indeedinfowindow未在您的代码中定义。

使用 infowindows 必须在标记生成器中完成，基本上你想覆盖这里的方法。

# in a coffee file
class @YourBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder

  create_infowindow_on_click: ->
    google.maps.event.addListener @serviceObject, 'mouseover', @infowindow_binding

# then pass your builder when you create one handler
handler = Gmaps.build 'Google', { builders: { Marker: YourBuilder } }
于 2014-05-15T06:42:20.383 回答