如何在循环JavaScript中使用GoogleMaps InfoWindow（）？

Question

如果我在循环中使用，则不会显示InfoWindow。

以下是如何与标记一起使用的示例：https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple

我做了类似的事情，但是使用Circle，下面的代码，您可以看到，console.log在工作，但是信息窗口却没有。我想念什么？

function initMap() {

    // Map settings, location : Barcelona, Spain
    let map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 41.37, lng: 2.17},
        zoom: 15,
        mapTypeId: 'roadmap',
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: true,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: true
    });

    // Circle distribution data : location, radius, data
    let distribution = {
        target_garden: {
            center: {lat: 41.371400, lng: 2.171942},
            population: 1,
            data: `<div>Text 01</div>`
        },
        target_wtc: {
            center: {lat: 41.373477, lng: 2.177650},
            population: 2,
            data: `<div>Text 02</div>`
        }
    };

    // Display 2 red circles on map
    let target;
    for (target in distribution) {

        let circle = new google.maps.Circle({

            // colors
            strokeColor: '#000',
            strokeOpacity: .2,
            strokeWeight: 3,
            fillColor: '#f00',
            fillOpacity: 0.5,

            // position
            map: map,
            center: distribution[target].center,
            radius: Math.sqrt(distribution[target].population) * 100,

            // settings
            draggable: false,
            editable: false,
            clickable: true

        });

        let infowindow = new google.maps.InfoWindow({
            content: distribution[target].data
        });

        // Event : on click a circle open infowindow
        circle.addListener('click', function () {
            infowindow.open(map, circle);
            console.log('on');
        });

    }

}

我希望点击红色圆圈打开信息窗口。

Answer 1

问题不是循环，而是您正在尝试将InfoWindow锚定到Circle。这来自Maps API文档：

open（[地图，锚点]）

在给定的地图上打开此InfoWindow。 （可选）InfoWindow可以与锚关联。

核心API，唯一的锚点是Marker类。但是，锚可以是任何公开LatLng位置属性的MVCObject并可选的Point anchorPoint属性，用于计算pixelOffset（请参见InfoWindowOptions）。

因此，您可以通过某种方式扩展Circle以确保其具有position属性，或者可以显式设置InfoWindow的位置（而不使用锚点：]

infowindow.setPosition(circle.getCenter());
infowindow.open(map);