Ruby on Rails - 地理编码器对象作为Google地图标记阵列

Question

我目前正在开发销售代表跟踪工具，并且坚持要为地图中的地理编码对象显示标记数组。我使用geocoder的near函数来查找从我的位置通过URL传递的0.5km的地理编码对象。我的当前代码只要在该半径内只有一个对象就可以工作，并且我知道我需要使用Array来显示多个对象，但过去两周我一直坚持这样做。

stores_controller.rb 
def index 
    @latitude = params[:latitude].to_f 
    @longitude = params[:longitude].to_f 
    @stores = current_user.stores 
    @locations = @stores.near([@latitude, @longitude], 0.5) 
end 

在我的商店地图/ index.html.erb

function initMap() { 
    <% @locations.each do |store| %> 
    var lat = <%= store.latitude %> 
    var lng = <%= store.longitude %> 
    var mylatlng = {lat: lat, lng: lng} 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: mylatlng 
    }); 

    var marker = new google.maps.Marker({ 
     position: mylatlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
    }); 
     google.maps.event.addListener(marker, 'click', function() { 
     var c = confirm('Would you like to visit this store?') 
     if (c === true) { 
     window.location.href = '<%= store_path(store) %>'; 
     } 
     if (c === false) { 
     window.location.href = '<%= dashboard_path %>'; 
     } 

    }); 

    var contentString = 'Please click on this Marker to visit' + ' ' + '<%= store.storename %>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
    infowindow.open(map, marker); 
    }); 
    } 
    <% end %> 

应用程序设置会出现在在同一时间最多两个或3个对象的方式，我知道JSON是一种选择，但我希望有一种方法可以避免这样做。我读过的有关地图数组的所有资源都涉及到手动传递数组参数，但我需要动态地执行它，看起来好像对象会因代表不同而不同。

在此先感谢您的帮助。

Answer 1

您正在以一种没有任何意义的方式将您的Javascript与Ruby代码混合。它与一个工作的原因是，当您使用@locations数组中的单个对象执行它时，它会运行一次并正确输出该Javascript。当它具有> 1个对象时，它基本上会复制您的Javascript方法的内容。

假设你正在使用jQuery，这里，将工作方式：

<%- @locations.map {|store| "<div id='store_#{store.id}' class='store-object' data-latitude='#{store.latitude}' data-longitude='#{store.longitude}' data-name='#{store.name}' data-path='#{store_path(store)}'></div>".html_safe} %> 

function initMap() { 
    var $stores = $(".store-object"); 
    $stores.each(function() { 
    var lat = $(this).data("latitude"); 
    var lng = $(this).data("longitude"); 
    var mylatlng = {lat: lat, lng: lng} 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: mylatlng 
    }); 

    var marker = new google.maps.Marker({ 
     position: mylatlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     var c = confirm('Would you like to visit this store?') 
     if (c === true) { 
     window.location.href = $(this).data("path"); 
     } 
     if (c === false) { 
     window.location.href = '<%= dashboard_path %>'; 
     } 
    }); 

    var contentString = 'Please click on this Marker to visit' + ' ' + $(this).data("name"); 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
     infowindow.open(map, marker); 
    }); 
    }); 
} 

Answer 2

谢谢@Orlando指着我在正确的方向。我设法解决我的问题，通过使用JSON和一个JS循环的标记和infowindows。我没有改变我的控制器中的任何东西，修改后的代码如下所示。

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: <%= params[:latitude] %>, lng: <%= params[:longitude] %>}, 
     zoom: 18, 
     scrollwheel: false, 
}); 

var json = <%= raw @locations.map.to_json {|store|}.html_safe %>; 

for (var i = 0, length = json.length; i < length; i++) { 
var data = json[i], 
    LatLng = {lat: data.latitude, lng: data.longitude}; 

var marker = new google.maps.Marker({ 
position: LatLng, 
map: map, 
animation: google.maps.Animation.DROP 
}); 

google.maps.event.addListener(marker, 'click', function() { 
     var c = confirm('Would you like to visit this store?') 
     if (c === true) { 
     window.location.href = "stores/" + data.id; 
     }  
     if (c === false) { 
     window.location.href = '<%= dashboard_path %>'; 
     } 
    }); 

    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent('Click the Marker to visit' + ' ' + data.storename); 
    infowindow.open(map, marker); 
    } 
}