如何将集群标记添加到 Gmaps4rails？

Question

我能够以这种格式在 index.html.erb 文件中添加标记簇。当我决定添加 infowindows 时，我的地图开始崩溃。

<script type = "text/javascript">
    handler = Gmaps.build('Google',
    {markers:
      {clusterer: {
        gridSize: 60,
        maxZoom: 20,
        styles: [ {
          textSize: 10,
          textColor: '#ff0000',
          url: 'assets/creative/m1.png',
          height: 60,
          width: 60 }
        , {
          textSize: 14, 
          textColor: '#ffff00',
          url:'assets/creative/m2.png',
          height: 60,
          width: 60 }
        , {
         textSize: 18, 
         textColor: '#0000ff',
         url: 'assets/creative/m3.png',
         width: 60,
         height: 60}
        ]}}}
    );
        handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
             markers = handler.addMarkers(<%=raw @hash.to_json %>);
            handler.bounds.extendWith(markers);
            handler.fitMapToBounds();

        });

当我将 infowindows 添加到我的 custom.js.coffee 文件下的 Web 应用程序时

class InfoBoxBuilder extends Gmaps.Google.Builders.Marker 

create_infowindow: ->
return null unless _.isString @args.infowindow

boxText = document.createElement("div")
boxText.setAttribute('class', 'panel panel-green') 
boxText.innerHTML = @args.infowindow
@infowindow = new InfoBox(@infobox(boxText))


infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
  width: "280px"

@buildMap = (markers)->
handler = Gmaps.build 'Google', { builders: { Marker: InfoBoxBuilder} 
} 
handler = Gmaps.build 'Google', { builders: { markers:
      {clusterer: {
        gridSize: 60,
        maxZoom: 20,
        styles: [ {
          textSize: 10,
          textColor: '#ff0000',
          url: 'assets/creative/m1.png',
          height: 60,
          width: 60 }
        , {
          textSize: 14, 
          textColor: '#ffff00',
          url:'assets/creative/m2.png',
          height: 60,
          width: 60 }
        , {
         textSize: 18, 
         textColor: '#0000ff',
         url: 'assets/creative/m3.png',
         width: 60,
         height: 60}
        ]}}} }  #dependency injection

  handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
  markers = handler.addMarkers(markers)
  handler.bounds.extendWith(markers)
  handler.fitMapToBounds()

我让标记集群正常工作，但我丢失了信息窗口格式。如何将 infowwindow 和标记群集代码注入 custom.coffee.js 文件。

Answer 1

我终于明白了。我首先将 infobox builder 从 coffeescript 转换为普通的旧 vanilla javascript，然后在第一次依赖注入后，我添加了标记集群依赖项。我在视图中添加了以下代码。

    var InfoBoxBuilder, handler,
      extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
      hasProp = {}.hasOwnProperty;

    InfoBoxBuilder = (function(superClass) {
      extend(InfoBoxBuilder, superClass);

      function InfoBoxBuilder() {
        return InfoBoxBuilder.__super__.constructor.apply(this, arguments);
      }

      InfoBoxBuilder.prototype.create_infowindow = function() {
        var boxText;
        if (!_.isString(this.args.infowindow)) {
          return null;
        }
        boxText = document.createElement("div");
        boxText.setAttribute('class', 'panel panel-green');
        boxText.innerHTML = this.args.infowindow;
        return this.infowindow = new InfoBox(this.infobox(boxText));
      };

      InfoBoxBuilder.prototype.infobox = function(boxText) {
        return {
          content: boxText,
          pixelOffset: new google.maps.Size(-140, 0),
          boxStyle: {
            width: "280px"
          }
        };
      };

      return InfoBoxBuilder;

    })(Gmaps.Google.Builders.Marker);

        handler = Gmaps.build('Google', {
          builders: {
            Marker: InfoBoxBuilder
          },
           markers:
                  {clusterer: {
                    gridSize: 60,
                    maxZoom: 20,
                    styles: [ {
                      textSize: 10,
                      textColor: '#ff0000',
                      url: 'assets/creative/m1.png',
                      height: 60,
                      width: 60 }
                    , {
                      textSize: 14, 
                      textColor: '#ffff00',
                      url:'assets/creative/m2.png',
                      height: 60,
                      width: 60 }
                    , {
                     textSize: 18, 
                     textColor: '#0000ff',
                     url: 'assets/creative/m3.png',
                     width: 60,
                     height: 60}
                    ]}}
        });
        handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
                         markers = handler.addMarkers(<%=raw @hash.to_json %>);
                        handler.bounds.extendWith(markers);
                        handler.fitMapToBounds();

                    });

现在我可以为我的每个位置同时拥有标记集群和自定义信息窗口。