通过Ajax加载的谷歌地图标记不显示

Google Maps marker loaded via Ajax are not showing

本文关键字：图标 显示 地图 谷歌 Ajax 加载 通过      更新时间：2023-09-26

我的谷歌地图显示正确，也居中地图工作像一个魅力。但是当我想添加一些标记(只是标记，不想重新加载整个地图)时，什么也没有发生(地图上没有可见的标记)。

我的脚本是这样的:

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

您正在对coordinates = coordinates.slice(0, -2);进行切片，然后再次从像var locations = [ coordinates ];这样的坐标中生成数组。

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

也许你应该从g_maps_marker中删除var locations = [ coordinates ];，然后再试一次。我希望它能起作用。

**编辑

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

例如

    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两次。我已经在我的代码中修复了这个

相关文章：