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

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

<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();

        });

---

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

我终于明白了。我首先将infobox builder从coffeescript转换为普通的香草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();

                    });

var InfoBoxBuilder，处理程序，
extend=function（child，parent）{for（parent中的var-key）{if（hasProp.call（parent，key））child[key]=parent[key]；}function-ctor（）{this.constructor=child；}ctor.prototype=parent.prototype；child.prototype=new-ctor（）；child.\uu super\uu=parent.prototype；return child；}，
hasProp={}.hasOwnProperty；
InfoBoxBuilder=（函数（超类）{
扩展（InfoBoxBuilder，超类）；
函数InfoBoxBuilder（）{
返回InfoBoxBuilder.super.constructor.apply（这是参数）；
}
InfoBoxBuilder.prototype.create_infowindow=function（）{
var-boxText；
if（！\u.isString（this.args.infowindow））{
返回null；
}
boxText=document.createElement（“div”）；
setAttribute（'class'，'panel-panel-green'）；
boxText.innerHTML=this.args.infowindow；
返回this.infowindow=newinfobox（this.InfoBox（boxText））；
};
InfoBoxBuilder.prototype.infobox=函数（boxText）{
返回{
内容：boxText，
pixelOffset:new google.maps.Size（-140,0），
箱式：{
宽度：“280px”
}
};
};
返回InfoBoxBuilder；
})（Gmaps.Google.Builders.Marker）；
handler=Gmaps.build（'Google'{
建筑商：{
标记：InfoBoxBuilder
},
标记：
{群集器：{
网格大小：60，
maxZoom:20，
样式：[{
文本大小：10，
text颜色：'#ff0000'，
url:'assets/creative/m1.png'，
身高：60，
宽度：60}
, {
文本大小：14，
textColor:“#ffff00”，
url:'assets/creative/m2.png'，
身高：60，
宽度：60}
, {
文本大小：18，
textColor:“#0000ff”，
url:“assets/creative/m3.png”，
宽度：60，
身高：60}
]}}
});
buildMap（{provider:{}，internal:{id:'map'}}，function（）{
markers=handler.addMarkers（）；
handler.bounds.extendWith（markers）；
handler.fitMapToBounds（）；
});

现在，我可以为我的每个位置设置标记簇和自定义信息窗口。

请阅读-总结是，这不是一种理想的解决志愿者问题的方法，可能会对获得答案产生反作用。请不要将此添加到您的问题中。

    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();

                    });