Ajax调用添加标记 - ＆gt; addListener到marker - ＆gt;新的ajaxCall来设置infowindow内容

Question

正如标题所述，我向Google Maps API添加了多个标记。我通过ajax调用从数据库中获取经度和纬度值。这很好。

我在地图上有很多标记，并且所有标记都带有外部图像，因此我认为最好在标记点击上加载infowindow内容（默认情况下将其加载到背景中直到它们全部加载）。

我认为在标记上的点击监听器中进行简单的ajax调用就可以了。但是ajax不会加载（没有成功，没有错误，根本就没有加载）。

我认为某处出了问题：

marker.addListener('click', function () {
                $.ajax({
                    url: "PHP/getMarkerInfo.php",
                    type: "GET",
                    data: {
                        longitude: this.position.lng(),
                        latitude: this.position.lat()
                    },
                    succes: function (data) {
                        if (data == "nodata") {} else {
                            var xml = $.parseXML(data); //data.responseXML;
                            var markers = xml.documentElement.getElementsByTagName('marker');
                            Array.prototype.forEach.call(markers, function (markerElem) {
                                var infowincontent = document.createElement('div'); //this has more content in real example




                                infoWindow.setContent(infowincontent);
                                infoWindow.open(map, marker);
                            });
                        }
                    }
                });
            });

整个功能：

function searchAll() {
var postToSearch = $("#postName").val();
var authorToSearch = $("#author").val();
var tagToSearch = $("#tag").val();
var dateRangeToSearch = $("#fromDate").val();
if ($("#editorsChoice").is(":checked")) {
    var editorsChoice = $("#editorsChoice").val();
} else {
    var editorsChoice = "0";
}
$.ajax({
    url: "PHP/search.php",
    type: "GET",
    data: {
        author: authorToSearch,
        post: postToSearch,
        tag: tagToSearch,
        dateRange: dateRangeToSearch,
        editorsChoice: editorsChoice
    },
    success: function (data) {
        for (var i = 0; i < markerArray.length; i++) {
            markerArray[i].setMap(null);
        }
        markerArray = [];

        if (markerCluster) {
            markerCluster.clearMarkers();
        }
        if (data == "nodata") {} else {
            var xml = $.parseXML(data); //data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function (markerElem) {
                var postLink = markerElem.getAttribute('postLink');

                var point = new google.maps.LatLng(
                    parseFloat(markerElem.getAttribute('lattitude')),
                    parseFloat(markerElem.getAttribute('longitude')));



                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    title: postLink
                });
                marker.addListener('click', function () {
                    $.ajax({
                        url: "PHP/getMarkerInfo.php",
                        type: "GET",
                        data: {
                            longitude: this.position.lng(),
                            latitude: this.position.lat()
                        },
                        succes: function (data) {
                            if (data == "nodata") {} else {
                                var xml = $.parseXML(data); //data.responseXML;
                                var markers = xml.documentElement.getElementsByTagName('marker');
                                Array.prototype.forEach.call(markers, function (markerElem) {
                                    var postLink = markerElem.getAttribute('postLink');
                                    var steemName = markerElem.getAttribute('steemName');
                                    var postTitle = markerElem.getAttribute('postTitle');
                                    var postImageLink = markerElem.getAttribute('postImageLink');
                                    var postUpvote = markerElem.getAttribute('postUpvote');
                                    var postValue = markerElem.getAttribute('postValue');
                                    var postDate = markerElem.getAttribute('postDate');
                                    var postDescription = markerElem.getAttribute('postDescription');


                                    var infowincontent = document.createElement('div');
                                    infowincontent.className = "infoDiv";
                                    var DOM_link = document.createElement("a");
                                    DOM_link.href = postLink;
                                    DOM_link.target = "blank";
                                    var DOM_img = document.createElement("img");
                                    DOM_img.src = postImageLink;
                                    DOM_img.alt = "Steemit post image";
                                    DOM_img.className = "postImg";
                                    DOM_link.appendChild(DOM_img);
                                    infowincontent.appendChild(DOM_link);

                                    var DOM_textDiv = document.createElement("div");
                                    DOM_textDiv.className = "textDiv";

                                    var DOM_title = document.createElement("h2");
                                    DOM_title.className = "postTitle";
                                    var DOM_titleLink = document.createElement("a");
                                    DOM_titleLink.href = postLink;
                                    DOM_titleLink.target = "blank";
                                    var titleText = document.createTextNode(postTitle);
                                    DOM_titleLink.appendChild(titleText);
                                    DOM_title.appendChild(DOM_titleLink);
                                    DOM_textDiv.appendChild(DOM_title);

                                    var DOM_description = document.createElement("p");
                                    DOM_description.className = "postDescription";
                                    var descriptionText = document.createTextNode(postDescription);
                                    DOM_description.appendChild(descriptionText);
                                    DOM_textDiv.appendChild(DOM_description);

                                    var DOM_extraInfo1 = document.createElement("p");
                                    DOM_extraInfo1.className = "extraInfo1";
                                    var steemNameText = document.createTextNode(steemName + "\u00A0\u00A0\u00A0\u00A0");
                                    DOM_extraInfo1.appendChild(steemNameText);
                                    DOM_textDiv.appendChild(DOM_extraInfo1);

                                    var DOM_extraInfo = document.createElement("p");
                                    DOM_extraInfo.className = "extraInfo";
                                    var upvotesText = document.createTextNode("\u25B4" + postUpvote + "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0");
                                    var valueText = document.createTextNode("$" + postValue + "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0");
                                    var dateText = document.createTextNode(postDate);
                                    DOM_extraInfo.appendChild(upvotesText);
                                    DOM_extraInfo.appendChild(valueText);
                                    DOM_extraInfo.appendChild(dateText);
                                    DOM_textDiv.appendChild(DOM_extraInfo);

                                    infowincontent.appendChild(DOM_textDiv);

                                    infoWindow.setContent(infowincontent);
                                    infoWindow.open(map, marker);
                                });
                            }
                        }
                    });
                });
                markerArray.push(marker);
            });
            markerCluster = new MarkerClusterer(map, markerArray, {
                zoomOnClick: false,
                imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
            });
            google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {

                var markers = cluster.getMarkers();

                var markerTitles = [];

                for (i = 0; i < markers.length; i++) {
                    markerTitles.push(markers[i].getTitle());
                }
                //SEND THIS TO PHP AND GET DATA FROM MARKERS WITH THIS TITLE
                $.post('PHP/cluster.php', {
                    markerTitles: markerTitles
                }, function (data) {
                    //alert(data);
                    infoWindow.setContent(data);
                    infoWindow.setPosition(cluster.getCenter());
                    infoWindow.open(map);

                });
            });
            google.maps.event.addListener(map, 'click', function () {
                if (infowindow) {
                    infowindow.close();
                }
            });

        }
    }
})
}