如何关闭地图上标记的所有信息窗口

Question

我用这些代码在我的地图上添加了 3 个标记。 但是当我点击它们时。 信息窗口打开但其他标记信息窗口未关闭

function AddMarker(location, map) {
    var contentString = '<div content="text/html; charset=windows-1254" style="font-family:Tahoma; font-size: 8pt; border:solid 0px black; width: 250px;" id="bodyContent">' +
      '<p><b>Message Number: 12 </b> ' +
      '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: 'Bilgi'
    });
    marker.addListener('click', function () {
        infowindow.open(map, marker);
    });
}

Answer 1

var activeInfoWindow;    
function AddMarker(location, map) {
    var contentString = '<div content="text/html; charset=windows-1254" style="font-family:Tahoma; font-size: 8pt; border:solid 0px black; width: 250px;" id="bodyContent">' +
      '<p><b>Message Number: 12 </b> ' +
      '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: 'Bilgi'
    });
    marker.addListener('click', function () {
        if (activeInfoWindow) { activeInfoWindow.close();}
        infowindow.open(map, marker);
        activeInfoWindow = infowindow;
    });
}

Answer 2

Devz 的回答对所有标记重复了相同的信息窗口......

要修复它，请使用var activeInfoWindow；

var activeInfoWindow;    
 function AddMarker(location, map) {
var contentString = '<div content="text/html; charset=windows-1254" style="font-family:Tahoma; font-size: 8pt; border:solid 0px black; width: 250px;" id="bodyContent">' +
  '<p><b>Message Number: 12 </b> ' +
  '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});
var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: 'Bilgi'
});
marker.addListener('click', function () {
    if (activeInfoWindow ) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});
}

Answer 3

这允许您一次打开一个。

    class MarkerWithInfoWindow extends React.Component {

  constructor() {
      super();
      this.state = {
          isOpen: false,
          out: false,
          in: false
      }

  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  onToggleOpen = () => {
      this.setState({
          isOpen: !this.state.isOpen
      });

  }



setWrapperRef = (node) => {
  this.wrapperRef = node;
}

handleClickOutside = (event) => {
  if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {

    this.onToggleOpen();
  }
}

  render() {
      return (<Marker
          position={this.props.position}
          onClick={this.onToggleOpen}>
          {this.state.isOpen && <InfoWindow   style={{ borderRadius: '25px'}} >
            <div 
            ref={this.setWrapperRef}



            style={{ borderRadius: '25px', backgroundColor: `white`,  marginTop: 0, width: '250px', height: '350px' }}>
              <Grid container >
                <Grid item  style={{height: '60%', }}>
                  <img src={GameImage} style={{ borderTopLeftRadius: '25px', borderTopRightRadius: '25px', position: 'absolute', top: 0, left:0, width: '100%'}}/>
                </Grid>
                </Grid>

                <Grid container >

                <Grid item xs={6} style={{position: 'absolute', top: '50%'}}>
              <Typography variant="h6" gutterBottom>
        Name of Game
      </Typography>
               </Grid>

              </Grid>

            </div>

          </InfoWindow>}
      </Marker>)
  }
}