添加标记与谷歌地图和Ruby

Adding Markers with Google Maps and Ruby

本文关键字：Ruby 谷歌地图 加标记 添加      更新时间：2023-09-26

我使用ruby并在页面上设置了一个地图。我可以在初始化时添加标记，但我想要的是遍历@events并找到经度和纬度字段，并执行如下操作

<% @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");
    }
}

我的建议是:

<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)在运行时将坐标加载到一个数组中，然后可以使用该数组填充地图。

相关文章：