Question

我能够在index.html.erb文件中以此格式添加标记群集。当我决定添加infowindows时，我的地图开始破碎。

$all=array();   
foreach($sall as $sskey => $ssvalue){
    foreach($upgradesall as $uukey => $uuvalue){
        //$sskey==$uukey?$all[] = array("id"=>$sskey, "amount"=>$ssvalue+$uuvalue):($sskey!=$uukey? $all[] = array("id"=>$sskey, "amount"=>$ssvalue):($uukey!=$sskey?$all[] = array("id"=>$uukey, "amount"=>$uuvalue):''));
        if($sskey===$uukey){
            $all[] = array("id"=>$sskey, "amount"=>$ssvalue+$uuvalue);
        }elseif($sskey!=$uukey){
            $all[] = array("id"=>$sskey, "amount"=>$ssvalue);
        }elseif($uukey!=$sskey){
            $all[] = array("id"=>$uukey, "amount"=>$uuvalue);
        }
    }
}

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

时

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

        });

我让标记群集工作但我失去了infowindow格式。如何将infowwindow和标记群集代码注入custom.coffee.js文件。

Answer 1

我终于明白了。我首先将信息框构建器从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();

                    });

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

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

1 个答案: