Question

我正在尝试摆脱地图中infowindows中出现的滚动条，但我无法看到应该应用样式的哪个元素。

使用Google Maps 4 rails渲染地图时，我应该应用哪些元素？我知道它们是div，但是没有特定的类或选择器，因此我无法选择窗口。

我从像这样的部分渲染我的窗口：

marker.infowindow render_to_string(:partial => 'window_info', :locals => {:place => place})

Answer 1

你需要告诉它使用一个特定的类，这是我在我的应用程序中的方式：

<%= gmaps({"markers" => 
            {"data" => @json , 
             "options" => {"custom_infowindow_class" => "infobox", 
             "auto_adjust"=>false, "do_clustering"=>true}}} ) %>

我认为你只需要弄清楚如何传递

"options" => {"custom_infowindow_class" => "whatever" }

进入地图初始化

然后你可以创建css类并应用你自己的样式

.whatever { 
  #whatever
}

Answer 2

根据Styling Google Maps InfoWindow，我猜你无法按照自己想要的方式设计风格。你必须使用我在内置宝石中的InfoBox。

请参阅doc here，Custom infowindows部分。

Answer 3

在chrome中检查js控制台时出现错误：对象＃＆lt;标记＆gt;没有方法'信息框'。这是一个线索。

根据自定义信息窗口部分中的docs，第2步，我们必须初始化一个js代码，但这对我没用。

然后查看main.coffee中的gem内部

    infobox:            -> false   #to let user use custom infoboxes

设置为true无效

我的诀窍是改变这一行

@infowindow = new InfoBox(@infobox(boxText))

app / assets / javascripts / gmaps4rails / google / objects / marker.coffee中的

到docs中提到的代码。

    @infowindow = new InfoBox(
      content: boxText
      disableAutoPan: false
      maxWidth: 0
      pixelOffset: new google.maps.Size(-140, 0)
      zIndex: null
      boxStyle:
        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
        opacity: 0.75
        width: "280px"

      closeBoxMargin: "10px 2px 2px 2px"
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
      infoBoxClearance: new google.maps.Size(1, 1)
      isHidden: false
      pane: "floatPane"
      enableEventPropagation: false        

    )

Google Maps 4 rails中的样式窗口

3 个答案: