在JS.erb中使用ruby数组在地图上绘制位置

Question

我是编码的新手。我正在尝试使用JS在地图上绘制点，使用谷歌的API。如果我手动输入值，我可以使用它，但我需要能够通过Ruby添加它们。

以下是有效的代码：

   function initMap() {

    var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
    zoom: 3,
   center: {lat: -28.024, lng: 140.887}
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

   var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
    position: location,
      label: labels[i % labels.length]
    });
  });

  var markerCluster = new MarkerClusterer(mapv2, markers,
  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
  var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
];

我想要改变的是位置。这是我想出来的但是它不起作用：

更新

  function initMap() {

  var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
  center: {lat: -28.024, lng: 140.887}
  });

  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.each(function(location, i) {
return new google.maps.Marker({
  position: location,
  label: labels[i % labels.length]
    });
  });

   var markerCluster = new MarkerClusterer(mapv2, markers,
  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
  var locations = '<%= @array %>';

@latitude和longitude在rails中返回一组坐标。希望这是有道理的。如果您还有其他需要，请告诉我！任何指向正确的方向，或建设性的批评，非常感谢！

修改 所以在我的控制器中我有：

  def index
    @places = Place.all
    @longitude = @places.pluck(:longitude)
    @latitude = @places.pluck(:latitude)
  end

Answer 1

  

@latitude和经度返回一组坐标

那么在这种情况下它不会起作用，因为你需要哈希数组，lat和lng作为键。

您应该为每个位置提取纬度和经度，使用lat构建哈希，lng键并将它们推送到数组。

由于没有提供太多信息，我将假设并提供示例

示例：

@locations = #location objects with lat and lng coordinates
@array = []
@locations.each do |location|
  @array.push({
    lat: location.latitude,
    lng: location.longitude
  })
end

然后在js.erb中，只需执行

var locations = '<%= @array %>';

<强>更新

使用更新的代码，上面的示例应如下所示

@places = Place.all
@array = []
@places.each do |place|
  @array.push({
    lat: place.latitude,
    lng: place.longitude
  })
end

Answer 2

在您的控制器中：

places = Place.all

@coordinates = places.map{|place| {lat: place.latitude, lng: place.longitude}}

在您看来

：

var locations = <%= @coordinates.to_json %>;

Answer 3

我通过结合来自@dickieboy＆amp;的答案来修复它。 @pavan然后添加gsub以删除引号。我还在html页面上的脚本中移动了所有代码。这是完整的代码：

位置控制器

def index
 @places = Place.all
 @array = []
 @places.each do |place|
   @array.push({
    lat: place.latitude,
    lng: place.longitude
  })
 end
end

<强> Index.html.erb

<div id="mapv2"></div>
 <script type="text/javascript">
   function initMap() {
   var locations = <%= @array.to_json.gsub(/\s|"|'/,'') %>;
   var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

   var markers = locations.map(function(location, i) {
return new google.maps.Marker({
  position: location,
  label: labels[i % labels.length]
});
});

  var markerCluster = new MarkerClusterer(mapv2, markers,
  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}  

 </script>


 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

最终结果