Question

我从google places 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在这个帖子中有一个答案： How do I show multiple locations in Google Maps? 它使用谷歌地图javascript api。从该示例中可以看出，您应该只从坐标向地图添加标记（在这种情况下，他会使用一堆您应该从模型中加载的坐标）。

如何在谷歌地图静态API上获得多个坐标？

2 个答案: