單擊一個時關閉所有其他 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

如果您只需要一個 InfoWindow，只需創建一個並在單擊事件的標記之間移動它。

更新代碼：

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

概念證明小提琴

代碼片段：

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