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

如果我循环使用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');
        });

    }

}

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

liltlz 回答:如何在google.maps.Circle上使用GoogleMaps InfoWindow()?

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

  

打开([地图,锚点])

     

在给定的地图上打开此InfoWindow。 (可选)InfoWindow可以与锚关联。 在   核心API,唯一的锚点是Marker类。但是,锚可以   是任何公开LatLng位置属性的MVCObject ,并且   可选的Point anchorPoint属性,用于计算   pixelOffset(请参见InfoWindowOptions)。

因此,您可以以某种方式扩展Circle以确保其具有position属性,或者可以显式设置InfoWindow的位置(而不使用锚点):

circle.addListener('click',function () {
  infowindow.setPosition(circle.center) 
  infowindow.open(map);
}); 
本文链接:https://www.f2er.com/3159689.html

大家都在问