谷歌地图v3标记不令人耳目一新

时间:2014-05-29 22:18:02

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

所以我有3个Divs,隐藏的Lat Lng输入,以及一些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的代码片段:

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

1 个答案:

答案 0 :(得分: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);

&#39;完成&#39;响应返回后执行函数。文档和示例可以在这里找到:http://api.jquery.com/jquery.ajax/