Question

这里我创建一个ajax请求并处理它以返回一段文本。我想在“点击”事件中使用此文本填充我的信息窗口。

只要ajax调用成功并且地图和标记在视图中呈现，我的代码就会起作用。但是，信息窗口不会填充“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

您缺少第一个参数：

let sum = data[0]["total1"] + data[0]["total2"]

如何使用jQuery ajax请求中的文本填充谷歌地图信息窗口？ [示例包括]

1 个答案: