【问题标题】：Google Maps V3 InvalidValueError Rails 5谷歌地图 V3 InvalidValueError Rails 5
【发布时间】：2017-04-28 20:07:42
【问题描述】：

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

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

当我使用以下代码时：

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

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

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

错误截图：

我对向 Rails 应用程序添加动态地图比较陌生，不知道如何解决这个问题！在这里的任何帮助将不胜感激！

提前致谢！

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

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

编辑 2：添加错误截图：

【问题讨论】：

请复制粘贴该部分生成的代码。
lat 和 lng 的表现如何？
是的。似乎问题出在那儿。
好吧，我去抢它
帖子已更新，我认为这就是您要寻找的内容

标签： javascript ruby-on-rails ruby google-maps google-maps-api-3

【解决方案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
        });
  }

【讨论】：

好的，所以使用这个，我得到了一些错误，我把它们贴在上面：
更新了问题 EDIT #2 是哪里可以找到截图
@ShawnWilson 看起来您还需要一个 } 来关闭 for 循环
所以添加 extea close 修复了脚本，因此它运行无错误，但地图不会显示任何内容。为此添加了新问题。 stackoverflow.com/questions/43689680/…

【解决方案2】：

很确定错误是由您制作标记数组引起的

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

【讨论】：

所以我猜你这里发生了一些控制器魔法太正确了？
有点。 @json_parking_areas 变量是从数据库加载的标记数组，但一旦到达 index.html.erb 它将等到页面加载，调用 initIndexMap 然后在页面上查找 ID 为 @987654328 的项目@ 并从中获取数据