带有多个标记的谷歌地图没有出现[重复]

【问题标题】：google map with multiple markers is not appearing [duplicate]带有多个标记的谷歌地图没有出现[重复]
【发布时间】：2014-06-01 13:37:56
【问题描述】：

我想在谷歌地图上显示多个标记。我正在使用每个循环来遍历包含纬度和经度的模型列表。但是调用了函数并且它不显示地图。

代码：

      <div id="map_canvas" style="width: 80%; height: 80%">  </div>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
     </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
       sensor=false"></script>
      <script type="text/javascript">
$(document).ready(function () {
    alert("working");
    var map;
    var locations = [];

    var options = {
        zoom: 14,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map($('#map_canvas')[0], options);


    @* This is the razor loop *@
    @foreach (var item in Model) {
    <text>
    locations.push(item.latitude, item.longitude);

    </text>
     }
    var i;
    for (i = 0; i <= locations.length; i++) {
        var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]);

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

    }

});
 </script>

【问题讨论】：

标签： javascript google-maps razor

【解决方案1】：

这不起作用：

 var latlng = new google.maps.LatLng(markerlatLng);

markerlatLng 已经是 google.maps.LatLng，结果将是无效的 LatLng。

将markerlatLng 用作center-options 的属性

此外：您应该将地图创建与循环分开。在循环之前创建地图并在循环之后设置中心：

map.setCenter(markerlatLng);

另外：标记的地图属性必须是 map 而不是 map_canvas

【讨论】：