编辑：我是如何做到的例子

Question

所有我在Rails 5 Ruby 2.4.0中构建一个应用程序，我正在尝试实现一个动态谷歌地图，在地图上为PostgresDB中的每个位置放置一个标记。

我正在使用地理编码器gem，这是分配我的lat和lng浮点值。

当我使用以下代码时：

ErrorException in MailTrait.php line 14: Undefined variable: arr_recepients

我在谷歌浏览器的控制台输出中出现以下错误：

<script>
  function initMap() {
    var uluru = [
     <% @locations.each do |location| %>
       { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
     <% end %>
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>

错误的屏幕截图：

我在向rails应用添加动态地图方面相对较新，并且不确定如何解决此问题！这里的任何帮助将不胜感激！

提前致谢！

编辑1：添加脚本生成的输出：

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

编辑2：添加错误屏幕截图

Answer 1

非常确定错误是由制作标记数组引起的

var uluru = [
 <% @locations.each do |location| %>
   { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
 <% end %>
];

然后将其作为单个标记传递

var marker = new google.maps.Marker({
  position: uluru, #uluru is an array, not a LatLng
  map: map
});

也可能是当您使用ERB注入位置值时，它们将作为字符串而不是浮点数{ lat:<%= location.latitude %>, lng:<%= location.longitude %> }注入，因此您可能希望确保不会发生这种情况。

编辑：我是如何做到的例子

index.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src='https://maps.googleapis.com/maps/api/js?key=<%= ENV["key_name"] %>'></script>

    <script type="text/javascript">
      google.maps.event.addDomListener(window, "load", initIndexMap);
    </script>
  </head>
  <body>
    <div>
      <%= content_tag "div", class: "index-map", id: "index-map", data: {json_markers: @json_parking_areas} do %>
      <% end %>
    </div>
  </body>
</html>

index.js

function initIndexMap() {
  //get markers from id:#index-map content_tag
  var jsonMarkers = $("#index-map").data("jsonMarkers");
  //set center
  var center = new google.maps.LatLng(42.339169, -71.088474);
  //set bounds
  var bounds = new google.maps.LatLngBounds();

  //initialize map
  map = new google.maps.Map(document.getElementById('index-map'), {
    center: center,
    zoom: 4
  });

  //for loop to add markers          
  for (var i = 0; i <  jsonMarkers.length; ++i) {
    (function() {
      var latLng = {lat: jsonMarkers[i].lat, lng: jsonMarkers[i].lng};
      var infowindow = new google.maps.InfoWindow({
        content: jsonMarkers[i].infowindow
      });

      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: jsonMarkers[i].picture,
        label: jsonMarkers[i].title
      });    
      bounds.extend(marker.getPosition());
    })();
  }
}

Answer 2

好像您正在使用single标记的代码。如果您想要显示多个标记，则必须将它们添加为marker cluster或循环遍历数组。

  function initMap() {
    var uluru = [
     <% @locations.each do |location| %>
       { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
     <% end %>
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
    });
    for (i = 0; i < uluru.length; i++) {  
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(uluru[i]['lat'], uluru[i]['lng']),
            map: map
        });
  }

Google Maps V3 InvalidValueError Rails 5

2 个答案:

编辑：我是如何做到的例子