0

私はルビーを使用しており、ページにマップを設定しています。初期化時にマーカーを追加できますが、@events をループして経度と緯度のフィールドを見つけて、このようなことをしたいのです。

<% @event.each do |event|%>
  <script type="text/javascript">
    var long = <%= event.longitude %>;
    var lati = <%= event.latitude %>;
    addMarker(long, lati);
  </script>
<% end %>

私はGoogle APIに精通していませんが、可能であれば期待していました.

ここで、マップAPIの構築に関して私が持っているもの

function initialize() 
{
    var lat, lon, map, myOptions;
    //check if user has geo feature
    if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(
    //get position

    function(position){
        lat = position.coords.latitude;
        lon = position.coords.longitude;

        //init map
        myOptions = {
           center: new google.maps.LatLng(lat, lon),
           zoom: 8,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
            var myLatlng = new google.maps.LatLng(46.4352,-80.9455);
    var marker = new google.maps.Marker({
        position: myLatlng,
        title:"Hello World!"
    });
    // To add the marker to the map, call setMap();
    marker.setMap(map);
    },
    // if there was an error
    function(error){
        alert('ouch');
    });
    }
    //case the users browser doesn't support geolocations
    else 
    {
        alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
    }
}
4

1 に答える 1

2

これが私の提案です：

<script type="text/javascript">

  function addMarker(lat, lng) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map
    });
  }

  <% @events.each do |event| %>
    addMarker(<%= event.latitude %>, <%= event.longitude %>);
  <% end %>

</script>

緯度と経度の 2 つの引数を取り、対応するマーカーを既存のマップに追加する関数を作成しaddMarkerます (まだ存在しない場合)。次に、Ruby を使用してaddMarkerperへの 1 つの呼び出しを作成できます@event。

これをさらに最適化する方法があります。たとえば、座標を JSON として出力する別の Ruby スクリプトを作成し、非同期 HTTP リクエスト (別名 Ajax) を使用して実行時に座標を配列に読み込み、それを使用してマップにデータを入力することができます。

于 2013-01-08T00:26:55.130 に答える