如何在google.maps.Circle上使用GoogleMaps InfoWindow()?]

问题描述 投票:0回答:1

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

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

我做了类似的事情,但是使用Circle,下面的代码,您可以看到console.log在起作用,但是Infowindow没有。

我想念什么?

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');
        });

    }

}

我希望单击红色圆圈打开一个信息窗口。

如果我循环使用InfoWindow,则不会显示它。这是一个如何与标记一起使用的示例:https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples / ...

javascript google-maps infowindow
1个回答
1
投票
问题不是循环,而是您正在尝试将InfoWindow锚定到Circle。这来自Maps API文档:
© www.soinside.com 2019 - 2024. All rights reserved.