Question

我在地图上添加了3个带有这些代码的标记。但是当我点击它们时。 Infowindow打开，但其他标记infowindow不会关闭

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

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

3 个答案: