RoR gem Gmaps4rails，自定义信息窗口

Question

我在 RoR 中有一个网站。

我使用 gmaps4rails gem 调用 Google 地图。

我想删除信息窗口的背景div，但我不知道怎么办。

@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>

但是输出是这样的：

我做错了什么？

@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 => "/home/infowindow", :locals => { :poi => poi})

但信息窗口与第一张图片保持一致

Answer 1

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

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

这将允许您针对主要 div 改变 window 的整体外观。让我知道这是否适合您，或者您是否也需要更多指导 post 您的代码。

这是我告诉你的更新后的代码部分。

        <!-- Custom info markers -->

     <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>

我更新了我的答案以适合你的。您需要在本节中的 class 位置创建一个 class 并根据您的喜好设置样式。

 boxText = document.createElement("div");
    boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens

RoR gem Gmaps4rails，自定义信息窗口

RoR gem Gmaps4rails, customize infowindow

maps

ruby-on-rails

infowindow

gmaps4rails