如何使用jQuery ajax請求中的文本填充Google Maps信息窗口？ [包含示例]

Question

在這里，我提出了一個ajax請求並對其進行處理，以返回一段文本。 我想在“點擊”事件中用此文本填充信息窗口。

只要ajax調用成功並且在View中呈現了地圖和標記，我的代碼就起作用了。 但是，信息窗口沒有像我希望的那樣填充“ click”事件中的文本。

相反，我得到一個類型錯誤：

TypeError: Cannot read property 'function (){
                wikiExtract(marker.title).then(function (data){
                infowindow...<omitted>... }' of undefined

如果我嘗試另一種對我來說直覺上正確的模式，則地圖將根本不會加載 ：

google.maps.event.addListener('click',
    wikiExtract(marker.title).then(function (data){
        infowindow.setContent(data);
        infowindow.open(bayarea, marker)
    });
);

這是我的地圖和ajax調用：

'use strict';

var bayarea;
var markers = [];

var initMap = function() {
    const map = document.querySelector('#map');
    const center = {
        lat: 37.656,
        lng: -122.288
    };

    bayarea = new google.maps.Map(map, {
        center,
        zoom: 9,
        scrollwheel: false,
    });

    var getMarkers = function getMarkers(siteDatabase) {
        var i = 1;
        for (var site in siteDatabase) {
            site = siteDatabase[site];
            addMarker(site, i * 200);
            i++;
        };

        var infowindow = new google.maps.InfoWindow();

        function addMarker(site, timeout) {
            window.setTimeout(function() {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(site.lat, site.lng),
                    map: bayarea,
                    title: site.position,
                    animation: google.maps.Animation.DROP
                });
                google.maps.event.addListener('click',function (){
                    wikiExtract(marker.title).then(function (data){
                    infowindow.setContent(data);
                    infowindow.open(bayarea, marker);
                    });

                });
                markers.push(marker);
            }, timeout);
        }    
    };
    getMarkers(siteDatabase);
};

function wikiExtract(site) {
    return $.when(ventanaWik(site)).then( (wiki) => {
        return dig(wiki.query.pages).extract;
    });
    function dig(object) {
        return object[Object.keys(object)[0]];
    }
    function ventanaWik(site) {
        return $.ajax({
            type: 'json',
            url: 'https://en.wikipedia.org/w/api.php' + '?origin=*'
            + '&format=json' + '&action=query' + '&prop=extracts'
            + '&exintro=' + '&explaintext=' + '&titles=' + site,
            method: 'GET'
        }).promise();
    }
};

編輯：使用此模式

   var initMap = function() {
    const map = document.querySelector('#map');
    const center = {
        lat: 37.656,
        lng: -122.288
    };

    bayarea = new google.maps.Map(map, {
        center,
        zoom: 9,
        scrollwheel: false,
    });

    var getMarkers = function getMarkers(siteDatabase) {
        var i = 1;
        for (var site in siteDatabase) {
            site = siteDatabase[site];
            addMarker(site, i * 200);
            i++;
        }

        var infowindow = new google.maps.InfoWindow({
            content: "<i class='fa fa-spinner fa-spin fa-lg' style='color: #FFA46B;' title='Loading...'></i> Loading..."
        });

        function addMarker(site, timeout) {
            window.setTimeout(function() {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(site.lat, site.lng),
                    map: bayarea,
                    title: site.position,
                    county: site.county,
                    animation: google.maps.Animation.DROP
                });
            google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
                return function() {
                    if (infowindow) {
                        infowindow.close();
                    }
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                    setTimeout(function(){ marker.setAnimation(null); }, 1500);
                    infowindow.open(bayarea, marker);
                    wikiExtract(marker.title).then(function(data) {
                        infowindow.setContent(data);
                    });
                };
            })(marker, infowindow));
            markers.push(marker);
            }, timeout);
        }    
    };
    getMarkers(siteDatabase);
};

function wikiExtract(site) {
    return $.when(ventanaWik(site)).then( (wiki) => {
        return dig(wiki.query.pages).extract;
    });
    function dig(object) {
        return object[Object.keys(object)[0]];
    }
    function ventanaWik(site) {
        return $.ajax({
            type: 'json',
            url: 'https://en.wikipedia.org/w/api.php' + '?origin=*'
            + '&format=json' + '&action=query' + '&prop=extracts'
            + '&exintro=' + '&explaintext=' + '&titles=' + site,
            method: 'GET'
        }).promise();
    }
}

Answer 1

根據文檔，google.maps.event.addListener（）具有3個參數：instance：Object，eventName：string，handler：Function。

https://developers.google.com/maps/documentation/javascript/reference#event

您缺少第一個參數：

google.maps.event.addListener(marker, 'click', function (){
    wikiExtract(marker.title).then(function (data){
        infowindow.setContent(data);
        infowindow.open(bayarea, marker);
    });
});