谷歌地图使用jquery从ajax添加标记

Question

我正在尝试将谷歌地图添加到我的网页，该网页的 div 具有指定宽度的雷达 id。我使用 jquery ajax 方法从第二页获取坐标，并使用 Marker 在地图上绘制它们。但只显示最后一个标记，不显示其他标记。

var global = new Array();
        $(document).ready(function () {

            console.log("ready!");
            if ($("#StartingDate").val() != "") {
                var start = $("#StartingDate").val();
                var end = $("#EndingDate").val();
                var id = $("#UserId").val();

                $.ajax({
                    url: "GetData.aspx?StartingDate=" + start + "&EndingDate=" + end + "&UserId=" + id, async: false, success: function (result) {
                        var resp = result.split(",");
                        for (x = 0; x < resp.length - 1; x++) {
                            var cor = resp[x].split(";");
                            var lat = cor[0];
                            var lon = cor[1];
                            var date = cor[2]
                            var temp = [lat, lon, date];
                            global.push(temp);
                        }
                    }
                });
            }


        });
        $(document).ajaxComplete(function () {

            var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
            var mapOptions = {
                zoom: 4,
                center: myLatlng
            }
            var map = new google.maps.Map(document.getElementById("radar"), mapOptions);
            for (var i = 0; i < global.length; i++) {
                console.log(global[i]);
                var marker =  new google.maps.Marker({
                    position: new google.maps.LatLng(parseFloat(global[i][0]),parseFloat(global[i][1])),
                    title: global[i][2]
                });

                marker.setMap(map);
            }

        });

ajax 调用成功后，我的名为 global 的变量填充如下：

global = [
 [
   0: "33.622835",
   1: "73.062932",
   2: "16/06/2015 1:17:24 AM"
 ],....
]; 

Answer 1

编辑：事实证明，您必须在发出 ajax 请求之前设置 .ajaxComplete 处理程序，因为您已将 async 设置为 false。 Here 是一个工作示例。

如果您打算稍后使用标记，我建议将标记保存在数组中（即：移动它们，或删除它们）。

只显示最后一个标记，因为您每次都覆盖它。您需要做的是将标记保存在数组中。

我要做的是创建一个函数addMarker，它使用给定的坐标和标题创建一个标记并返回它。 这看起来像这样：

function addMarker(title, x, y, map){
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(x,y),
        map: map,
        title: title
    });

    return marker;
}

应该在您当前在 for 循环中设置标记的位置调用此函数：

for (var i = 0; i < global.length; i++) {
    console.log(global[i]);
    markerArray[i] = addMarker(global[i][2], global[i][0], global[i][1], map);
}

markerArray 需要是像global 这样的全局数组。