谷歌地图 v3 标记不刷新答案

【问题标题】：Google Maps v3 markers not refreshing谷歌地图 v3 标记不刷新
【发布时间】：2014-07-19 14:03:29
【问题描述】：

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

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

这里是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);

所以它成功出去并得到结果。我猜它在实际完成替换标记之前以某种方式运行删除和设置，因此它再次设置“未替换数据”，因此为什么回到第一页最终导致第 2 页的标记出现？如果需要，这是 div 的外观的 sn-p：

    <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>

【问题讨论】：

我不确定我是否完全理解了这个问题，但是...... ajax 调用是异步的，所以很可能 deleteMarkers() 和 setRGBmarkers() 在 $(target).replaceWith(data); 之前被调用
有没有办法使调用非异步，这样之后的方法只有在数据到达后才执行？
在您的options 中，您可以设置async: false。 JavaScript 将停止工作，直到响应到达，但只有在代码的其他部分依赖于在 .done() 函数中运行的代码时，您才应该这样做。

标签： javascript jquery html google-maps google-maps-api-3

【解决方案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);

响应返回后执行“完成”功能的位置。文档和示例可以在这里找到：http://api.jquery.com/jquery.ajax/

【讨论】：