RoR gem Gmaps4rails,定制infowindow

时间:2017-07-09 15:52:59

标签: ruby-on-rails maps infowindow gmaps4rails

我在RoR有一个网站。

我使用gmaps4rails gem来调用Google地图。

我想删除infowindow的背景div,但我不知道怎么办。

enter image description here

@ EDIT1

我的index.html.erb

中有这段代码
<body>

<%# Mapa para mostrar todos os pontos guardados na base de dados %>
  <div id="map_show" class="" style=""></div>

  <script type="text/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', 'yourClass'); // This is where you add a class style it in your css and see what happens 
        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');
        handler.buildMap({ provider: {}, internal: {id: 'map_show'}}, function() {
          markers = handler.addMarkers(<%=raw @hash.to_json %>);
          handler.bounds.extendWith(markers);
          handler.fitMapToBounds();


        });
    </script>
</body>

但输出是这样的:

enter image description here

我做错了什么?

@ EDIT2

在我的部分_infowindow.html.erb中我有这个代码来告诉我纪念碑的信息,这些信息会转移到标记。

    <div class="card" style="">
  <%= image_tag poi.image, :class => "card-img-top cover" %>
  <div class="card-block">
    <h4 class="card-title"><%= poi.name %></h4>
    <p class="card-text"><%= simple_format(poi.description.first(400)) %></p>
  </div>
</div>

我可以把它放在哪里?我不知道在哪里放代码。

@ EDIT3

我使用此代码渲染控制器中的部分:

  

marker.infowindow render_to_string(:partial =&gt;“/ home / infowindow”,   :locals =&gt; {:poi =&gt; POI})

但infowindows仍然像第一张图片

1 个答案:

答案 0 :(得分:1)

我仍在学习自己,但基本上你需要能够定位infowindow div。当您使用gmaps4rails创建infowindow时,它会在主div中创建一个div,因此您只需自定义内部div。您需要更多代码来定位主div。我曾经使用以下代码来完成此任务:

cursor.execute("insert into user (macaddress) values ('%s')" % addr)

这将允许您定位主div改变窗口的整体外观。如果这对你有用,或者你的代码需要更多指导,请告诉我。

以下是我告诉你的更新代码部分。

def help2(mpath, filter=None, mode=0):
    """Search help with filter.  Example: help2(MyMod, 'DoXyz*')"""

    if not filter:
        sg = True

    elif not mode:
        r1 = "^" + filter
        r1.replace('*',      '\u0001')
        r1.replace('\u0001', '.*')

    else:
        r1 = filter

    for x in sorted(dir(mpath)):
        if not x.startswith('_'):
            if filter:
                sg = re.search(r1, x, re.IGNORECASE)
            if sg:
                e2 = getattr(mpath, x)
                f  = x + "():"
                d  = e2.__doc__
                if d: 
                    L  = d.splitlines()[0]
                else:
                    L  = "(none)"
                print("%-30s %s" % (f, L))

我更新了我的答案,以适应你的。您需要创建一个类,在此部分中您可以根据自己的喜好对其进行设置。

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', 'yourClass');
        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);