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

时间:2013-06-04 19:18:11

标签: javascript ajax google-maps google-maps-api-3

我的Google地图正确显示,地图中心也像魅力一样。但是当我想添加一些标记(只是标记,不想重新加载整个地图)时没有任何反应(地图上没有可见的标记)。

我的脚本如下所示:

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。

1 个答案:

答案 0 :(得分:0)

您正在切片coordinates = coordinates.slice(0, -2);,然后再次使用此var locations = [ coordinates ];之类的坐标制作数组。

我有点困惑。 slice已经为你提供了一个数组,为什么要重新制作一个数组?你确定你的循环被执行了吗?

也许您应该从var locations = [ coordinates ];删除g_maps_marker,然后重试。我希望它能奏效。

**编辑**

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

例如

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

    b = [a];

    b[0][0]; // => will result in [ and not in your desired element

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

    i = 1;

    coordinates = [];

    for(var i in data.results)
    {
        $('#content_table').append("blablabla");

        var coordinate = [];

        coordinate.push(data.results[i].title);

        coordinate.push(data.results[i].lat);

        coordinate.push(data.results[i].lon);

        coordinates.push(coordinate);
    };

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