我使用谷歌地理编码将地址转换为lat/lng坐标，然后在我的数据库中搜索附近的其他"文章"（实际上是存储地址）。这是有效的，我的"locations"foreach循环运行良好（如果我看控制台，我会看到一个数组）。但当我去添加我的标记时，什么都没有显示。下面的代码没有任何错误，但如果我console.log（lat），它会显示NaN。
地图出现了，并且根据变量"myLatlng"正确居中，但没有制造商显示。我在SO（HERE）上看到，地理编码创建了一个字符串，所以您需要解析字符串以使其浮动。但我在下面的尝试没有奏效。
我用的是laravel 5。如果你想看看我是如何得到我的纬度/经度坐标的，请在这里查看我自己问题的答案。我的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>
我有地图的页面在这些脚本标记下面有脚本。
这是我在.articles.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
如果我理解得当。您有这个"locations"数组。正确的这些是标记应该出现的位置。但如果我没有错的话，你可能会在这一行出现语法错误：
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。