如何在谷歌地图javascript中打开其他信息窗口时关闭信息窗口

how to close info window when other info window open in google map javascript

本文关键字：信息窗信息窗口其他谷歌地图 javascript 更新时间：2023-09-26

它工作正常，但我有一个问题，当我打开一个信息窗口时，它打开了，但当我打开其他信息窗口时。最后一个信息窗口仍然打开。但当我们打开新的inf窗口时，我想关闭它

            <script>
               window.onload = getMyLocation;
               var geocoder;
              var map;
              function getMyLocation() {
                if (navigator.geolocation) {
                   navigator.geolocation.getCurrentPosition(displayLocation);
                    } else {
                             alert("Oops, no geolocation support");
                            }
                    }
           //This function is inokved asynchronously by the HTML5 geolocation API.
                  function displayLocation(position) {
              //The latitude and longitude values obtained from HTML 5 API.
                  var latitude = position.coords.latitude;
                 var longitude = position.coords.longitude;
               //Creating a new object for using latitude and longitude values with Google map.
                var latLng = new google.maps.LatLng(latitude, longitude);

               showMap(latLng);
              addNearByPlaces(latLng);
              createMarker(latLng);
               //Also setting the latitude and longitude values in another div.
               // var div = document.getElementById("location");
                //div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " +        longitude;
           }
                function showMap(latLng) {
                   geocoder = new google.maps.Geocoder();
                     var markers = [];
                    //Setting up the map options like zoom level, map type.
                var mapOptions = {
                      center: latLng,
                       zoom: 16,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                       };
                //Creating the Map instance and assigning the HTML div element to render it in.
              map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
             // Create the search box and link it to the UI element.
                 }
            function addNearByPlaces(latLng) {
            var nearByService = new google.maps.places.PlacesService(map);

     var request = {
     location: latLng,
      radius: 500,
        types: ['atm']
          };
       nearByService.nearbySearch(request, handleNearBySearchResults);
    }
      function handleNearBySearchResults(results, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                   var place = results[i];
                createMarker(place.geometry.location, place);
              }
            }

          function createMarker(latLng, placeResult) {
              var markerOptions = {
               position: latLng,
                map: map,
              animation: google.maps.Animation.DROP,
           clickable: true
          }
         //Setting up the marker object to mark the location on the map canvas.
           var marker = new google.maps.Marker(markerOptions);
        if (placeResult) {
          var content = "<b>Name : </b>"+placeResult.name+"<br/><b>Address :                      </b>"+placeResult.vicinity+"<br/><b>Type :  </b>"+placeResult.types+"<br/> Rating :    "+placeResult.rating+"<br/>" ;
        addInfoWindow(marker, latLng, content);
    }
      else {
             var content = "You are here: ";
              addInfoWindow(marker, latLng, content);
           }
       }
          function codeAddress() {
       var address = document.getElementById('address').value;
       geocoder.geocode( { 'address': address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
           map.setCenter(results[0].geometry.location);
         var latitude = results[0].geometry.location.lat();
         var longitude = results[0].geometry.location.lng();
          <!-- alert("Latitude: " + latitude + "'nLongitude: " + longitude); -->
          var marker = new google.maps.Marker({
           map: map,
             position: results[0].geometry.location
        });
     }      else {
           alert('Geocode was not successful for the following reason: ' + status);
         }

      var latLngs = new google.maps.LatLng(latitude, longitude);
        addNearByPlaces(latLngs);
        createMarker(latLngs);
      });
       }

       function addInfoWindow(marker, latLng, content) {
       var infoWindowOptions = {
       content: content,
       position: latLng
        };
          var infowindow = new google.maps.InfoWindow(infoWindowOptions);

        google.maps.event.addListener(marker, 'click', function() {
            if(!marker.open){
                infowindow.open(map,marker);
                marker.open = true;
            }
            else{
                infowindow.close();
                marker.open = false;
            }
        });

        }
      </script>

我用这样的东西关闭所有infoWindows:

infoWindows = []; //variable to store all infoWindows
function createMarker( map, latlng, title, content, icon ) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: icon,
        title: title
    });
    var infoWindow = new google.maps.InfoWindow({
        content: content
    });
    infoWindows.push( infoWindow );
    google.maps.event.addListener(marker, 'click', function () {
        closeAllInfoWindows();
        infoWindow.open(map, marker);
    });
}
function closeAllInfoWindows() {
    for (var i=0;i<infoWindows.length;i++) {
        infoWindows[i].close();
    }
}