如果我循环使用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');
});
}
}
我希望单击红色圆圈以打开一个信息窗口。