Ruby on Rails – Geocoder对象作为谷歌地图标记数组

我目前正在开发销售代表跟踪工具，并坚持在地图中显示地理编码对象的Markers数组。 我正在使用地理编码器的近距离function来查找从我通过url传递的位置0.5公里的地理编码对象。 我的当前代码只要在该半径内只有一个对象就可以工作，我知道我需要使用一个数组来显示多个对象，但过去两周我一直坚持这一点。

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() {  var lat =  var lng =  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 = ''; } if (c === false) { window.location.href = ''; } }); var contentString = 'Please click on this Marker to visit' + ' ' + ''; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListenerOnce(map, 'tilesloaded', function() { infowindow.open(map, marker); }); }  

设置应用程序的方式一次最多只有两个或三个对象，我知道json是一个选项，但我希望有一种方法可以避免这样做。 我读过的关于地图数组的所有资源都涉及手动传递数组参数，但我需要动态地执行它，看到对象会因rep而异。

在此先感谢您的任何帮助。

Answer 1

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

假设你正在使用jQuery，这里有一种方法可行：

 <%- @locations.map {|store| "
".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和标记和infowindows的JS循环来解决我的问题。 我没有更改控制器中的任何内容，修改后的代码如下所示。

 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); } }