在JS.erb中使用ruby數組在地圖上繪制位置

Question

我是編碼新手。 我正在嘗試使用JS使用JS在Google的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和經度以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和@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>

最終結果