谷歌地图标记未显示数据库中的多个纬度/经度坐标

Question

我正在使用谷歌地理编码将地址转换为纬度/经度坐标，然后在我的数据库中搜索附近的其他“文章”（实际上是存储地址）。这是有效的，我的“位置”foreach 循环工作正常（如果我查看控制台，我会看到一个数组）。但是当我去添加我的标记时，什么都没有出现。下面的代码我没有收到任何错误，但如果我 console.log(lat) 它显示 NaN。

地图显示出来，并且根据 var 'myLatlng' 正确居中，但没有显示任何制造商。我在 SO (HERE) 上看到地理编码会创建一个字符串，因此您需要将字符串解析为浮动。但我在下面的尝试不起作用。

我正在使用 laravel 5。 如果你想看看我是如何得到我的 lat/lng 坐标的，请查看我对我自己的问题 HERE 的回答。 我的 template.blade.php 页面有这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places"></script>

我有地图的页面有这些脚本标签下面的脚本。

这是我有地图的页面的相关代码。文章.index.blade.php

@section('footer')
<script>
function initialize() {

var map_canvas = document.getElementById('map_canvas');

var myLatlng = new google.maps.LatLng(parseFloat({{ $article->lat }}),parseFloat({{ $article->lng }}));

var map_options = {
    center: myLatlng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)

var locations = [
@foreach($articles as $article)
  [{{$article->lat}}, {{$article->lng}}]
@endforeach
];

var lat = parseFloat(locations[0]);
var lon = parseFloat(locations[1]);

for (i = 0; i < locations.length; i++) {
    var location = new google.maps.LatLng(lat, lon);

    var marker = new google.maps.Marker({
        position: location,
        map: map,
    }); 
}

}

google.maps.event.addDomListener(window, "load", initialize);
</script>
@stop

Answer 1

如果我理解正确的话。你有这个“位置”数组。正确的？这些是标记应该出现的位置。但如果我没记错的话，你可能会在这一行出现语法错误：

var locations = [
@foreach($articles as $article)
  [{{$article->lat}}, {{$article->lng}}], //YOU NEED A COMMA TO SEPARATE EACH ELEMENT
@endforeach
];

可能是 API 不理解没有逗号分隔每个子元素的怪异数组：P

我希望你尝试这种不同的逻辑，看看它是否适用于这部分：

//var lat = parseFloat(locations[0]); REMOVE THIS
//var lon = parseFloat(locations[1]); AND THIS

for (i = 0; i < locations.length; i++) {
    var location = new google.maps.LatLng(locations[i][0], locations[i][1]);

    var marker = new google.maps.Marker({
        position: location,
        map: map,
    }); 
}

类型保留为String，无需转换为float。