通过 Ajax 加载的 Google 地图标记未显示

Question

我的谷歌地图显示正确，地图居中也很有效。但是当我想添加一些标记（只是标记，不想重新加载整个地图）时，什么也没有发生（地图上没有可见的标记）。

我的脚本如下所示：

function g_maps(){
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(48.2136522, 16.386172),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
}

function g_maps_marker(coordinates){
        var locations = [ coordinates ];
        var marker, i;

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            visible: true
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
}

我的 ajax 请求的（重要）部分如下所示：

...
      success:function(data){
        $('#pagination_content table').empty();
        data = $.parseJSON(data);

        i = 1;
        coordinates = "";
        for(var i in data.results) {
        $('#content_table').append("blablabla");
        coordinates += "['" + data.results[i].title + "', " + data.results[i].lat + ", " + data.results[i].lat + ", " + i++ + "], ";
        };

        coordinates = coordinates.slice(0, -2)
        g_maps_marker(coordinates);
      },
...

coordinates 的输出是这样的：

['abc', 48.1857442, 48.1857442, 0], ['xyz', 48.2136522, 48.2136522, 1]

函数g_maps在document.ready()事件中被调用。

我正在使用 API v3。

Answer 1

您正在对coordinates = coordinates.slice(0, -2); 进行切片，然后再次根据var locations = [ coordinates ]; 这样的坐标创建一个数组。

我有点困惑。 slice 已经给了你一个数组，为什么还要再做一个数组呢？你确定你的循环被执行了吗？

也许您应该从g_maps_marker 中删除var locations = [ coordinates ];，然后重试。我希望它会起作用。

** 编辑 **

在进一步分析代码后，我发现您正在尝试使用看起来像数组的字符串，然后尝试循环它。这行不通。

例如

 a = "[1, 2, 3]";

    b = [a]；

    b[0][0]； // => 将导致 [ 而不是您想要的元素

您应该使用以下代码来为坐标创建数组对象。

我 = 1; 坐标 = []; for(var i in data.results) { $('#content_table').append("blablabla"); 变量坐标 = []; 坐标.push(data.results[i].title); 坐标.push(data.results[i].lat); 坐标.push(data.results[i].lon); 坐标.push（坐标）； };

另外，您似乎在创建坐标数组时忘记使用longitude，并使用了两次latitude。我已经在我的代码中解决了这个问题。