Как использовать GoogleMaps InfoWindow () на google.maps.Circle?

Question

InfoWindow не отображается, если я использую его в цикле.

Вот пример использования его с маркером: https://developers -dot-devsite-v2-prod.appspot.com / maps / document / javascript / examples / infowindow-simple

Я сделал подобное, но с Circle, код ниже, как вы можете видеть, console.log работает, но Infowindow нет't.

Чего мне не хватает?

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. Это из документации API Карт:

open ([карта, якорь])

Открывает это информационное окно на данной карте. При желании InfoWindow может быть связано с привязкой. В базовом API единственным якорем является класс Marker . Однако привязкой может быть любой MVCObject, который предоставляет свойство позиции LatLng и, необязательно, свойство Point anchorPoint для вычисления pixelOffset (см. InfoWindowOptions).

Итак, вы можете как-то расширить Circle, чтобы сделатьубедитесь, что у него есть свойство position, или вы можете явно указать позицию InfoWindow (и не использовать привязку):

circle.addListener('click', function () {
  infowindow.setPosition(circle.center) 
  infowindow.open(map);
});