javascript - 谷歌地图 V3 InvalidValueError Rails 5

Question

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

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

when I use the following code:

<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>

我在 google chrome 的控制台输出中收到以下错误:

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

错误截图:

我对向 Rails 应用程序添加动态 map 还比较陌生，不确定如何解决这个问题!这里的任何帮助将不胜感激!

提前致谢!

EDIT 1: Adds Script generated output:

  function initMap() {
    var uluru = [
       { lat:51.0389453, lng:-113.9474975 },
       { lat:51.1015305, lng:-114.0411054 },
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

Edit 2: Adds Screenshot of errors:

Answer 1

似乎您正在使用 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
        });
  }