ruby-on-rails - 如何在谷歌地图静态 api 上获取多个坐标？

Question

我正在从 google 地方 API 中提取信息，我希望能够显示我在一张地图上绘制的所有坐标，而不是在一个页面上有多个地图（如下所示）。有没有人有什么建议？

先感谢您！

<%@c.each do |p|%>
<ul>
    <li><%= image_tag("http://maps.googleapis.com/maps/api/staticmap?center=#{p.lat},#{p.lng}&zoom=15&size=600x300&maptype=roadmap
    &markers=color:blue%7Clabel:S%7C#{p.lat},#{p.lng}&sensor=true")%></li>
    <li><%=p.name%></li>
    <li><%=p.rating%></li>
    <li><%p.lat%></li>
    <li><%p.lng%></li>
</ul>   
<%end%>

Answer 1

如果我理解正确，您基本上需要多个ul标签相互对齐。

本质上，您需要为 ul 元素提供固定宽度并应用浮动。在这里，我假设您希望并排放置三张地图。

它的CSS代码是：

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
ul {
    list-style: none;
    width: 30%;
    float: left;
    margin: 0;
    padding:1.5%;
}
ul img {
    max-width:100%;
}

或者如果您更喜欢 SCSS：

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
ul {
    list-style: none;
    width: 30%;
    float: left;
    margin: 0;
    padding:1.5%;
    li {
        img {
            max-width:100%;
        }
    }
}

如果您想看看它的外观，请查看http://jsfiddle.net/dheer/Ltxzj/2/

注意：如果您将其添加到您的 Rails 应用程序中，您可能需要为 ul 标签分配一个新类，因为当前代码的样式可能会影响其他设计元素。

Answer 2

Martin Bean 在此线程中有一个答案： 如何在 Google Maps 中显示多个位置？ 它使用谷歌地图 javascript api。如该示例所示，您应该只从您的坐标中将标记添加到地图中（在这种情况下，他会使用您应该从模型中加载的一堆坐标）。