单击一个时关闭所有其他 InfoWindows

Question

我正在尝试修改以下代码，以便在单击一个时关闭所有其他 infoWindows，因此一次只打开一个。目前一切都很好，除了用户可以打开多达 20 个 infoWindows。感谢您的帮助。

function infoWindow(marker, map, title, address, url) {
 google.maps.event.addListener(marker, 'click', function () {
  var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    iw = new google.maps.InfoWindow({
        content: html,
        maxWidth: 350
    });
    iw.open(map, marker);
});
}

Answer 1

如果您只想要一个信息窗口，只需创建一个并在点击事件的标记之间移动它。

更新代码：

// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map
  });
  infoWindow(marker1, map, "title1", "address1", "http://www.google.com")
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(37.44, -122.14),
    map: map
  });
  infoWindow(marker2, map, "title2", "address2", "http://www.yahoo.com")


}
google.maps.event.addDomListener(window, "load", initialize);
// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "' target='_blank'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 2

给你。对于任何使用反应的人。如果您将 Marker 设为单独的组件，则可以使用它。

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