0

Google Places API から情報を引き出しています。ページに複数の地図があるのに対して、1 つの地図に引き出したすべての座標を表示できるようにしたいと考えています (以下を参照)。誰か提案はありますか？

前もって感謝します！

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

2 に答える 2

0

私があなたを正しく理解していれば、本質的に複数のulタグを互いに整列させる必要があります。

基本的に、ul 要素に固定幅を指定し、フロートを適用する必要があります。ここでは、3 つのマップを並べて表示することを想定しています。

その 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 タグに割り当てることができます。

于 2013-04-22T02:46:00.913 に答える
0

このスレッドに Martin Bean による回答があります: Google マップで複数の場所を表示するにはどうすればよいですか? これは、Google マップの JavaScript API を使用します。その例に見られるように、座標からマーカーをマップに追加するだけです (その場合、彼はモデルからロードする必要がある一連の座標を使用します)。

于 2013-04-22T02:47:48.137 に答える