javascript - Google map v3 标记不刷新

Question

所以我有 3 个带有隐藏 Lat Lng 输入的 Div，以及一些 ajax 分页来更改它们。在初始加载时，我有一个脚本将三对 Lat Lng 输入中的每一对转换为标记并将它们插入数组中。所有这些都很好。

现在，当我使用脚本文件更新 3 个 div，然后尝试使用提供的 v3 API 方法来清除并重绘标记时，我在 map 上得到了相同的点。然后，如果我告诉它返回第一页结果，它会删除第一页标记，并且我会从 map 上的第二页获取标记。

这是 JavaScript:

var map;
var markers = [];
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(37.09024, -96.712891),
        zoom: 3
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    setRGBmarkers();
}

function setRGBmarkers() {
    markers.push(new google.maps.Marker({
        position: new google.maps.LatLng(
            Number(document.getElementById("address-0-Lat").value),
            Number(document.getElementById("address-0-Lng").value)
            ),
        map: map
    }));
    //removed other markers for brevity
}

function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setAllMap(null);
}

function deleteMarkers() {
    clearMarkers();
    markers = [];
}

var getPage = function () {
    var $a = $(this);

    var options = {
        url: $a.attr("href"),
        type: "get"
    };

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-nerd-target");
        $(target).replaceWith(data);
    });
    deleteMarkers();
    setRGBmarkers();
    alert('done');
    return false;
}

$(".body-content").on("click", ".pagedList a", getPage);

这样就成功出去并得到结果了。我猜测它在实际完成替换标记之前以某种方式运行删除和设置，因此它再次设置“未替换的数据”，因此为什么返回到第一页最终会显示第二页的标记？如果需要的话，这是 div 的一个片段:

    <div class="panel-body">
    Event Description
        <input id="address-0-Lat" type="hidden" value="34.0519079">
        <input id="address-0-Lng" type="hidden" value="-118.24389300000001">
    </div>

Answer 1

嗯，Anto 是正确的，在调查 ajax() 函数的 jQuery 文档后，我发现放置代码的正确位置如下所示:

var getPage = function () {
    var $a = $(this);

    var options = {
        url: $a.attr("href"),
        type: "get"
    };

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-nerd-target");
        $(target).replaceWith(data);
        deleteMarkers();
        setRGBmarkers();
        alert('done');
    });
    return false;
}

$(".body-content").on("click", ".pagedList a", getPage);

响应返回后执行“done”函数。文档和示例可以在这里找到:http://api.jquery.com/jquery.ajax/