0

我在使用ruby並在頁面上設置地圖。我可以在初始化時添加標記,但我想通過我的@events是循環並找到經度和緯度領域,做這樣的事情使用Google地圖和Ruby添加標記

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

我不熟悉谷歌的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"); 
    } 
} 

回答

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> 

創建addMarker功能(如果它不存在)有兩個參數 - 緯度和經度 - 並在現有地圖上添加相應的標記。然後,您可以使用Ruby按@event創建一個addMarker的調用。

有辦法可以進一步優化它。例如,您可以有一個單獨的Ruby腳本,將座標輸出爲JSON,並使用異步HTTP請求(又名Ajax)在運行時將座標加載到數組中,然後您可以使用它來填充地圖。

相關問題