Question

作为标题 - 当我点击其中一次打开时，如何隐藏其余的infoWidows？现在每次点击都等于新的infoWindow保持打开状态。

我只知道我应该只设置一个infoWindow并且我已经尝试了一整天而没有结果。

我认为这部分是原因，但我不能以不同的方式使用相同的功能：

var infoWindow = new google.maps.InfoWindow({
    content: opis[opisIndex++ % opis.length],                           
})

以下是我所拥有的：

var sourceLocation = {lat: 52.277255, lng: 16.995763};
var destinationLocations = [
    {lat: 52.278568, lng: 16.991688},
    {lat: 52.289379, lng: 16.9790611},
    {lat: 52.287274, lng: 16.999355}
];
var directionsService;
var directionsDisplay;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 52.285594, lng: 16.994291},
              zoom: 14
          });
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        markerOptions: {
            visible: false
        }
    });
    createSourceMarker();
    createDestinationMarkers();
}

function markerClicked(destinationLocation) {
    var directionsRequest = {
        origin: sourceLocation,
        destination: destinationLocation,
        travelMode: 'DRIVING'
    };

    directionsService.route(directionsRequest, handleDirectionResults);
}

function handleDirectionResults(result, status) {
    if (status === 'OK') {
        directionsDisplay.setDirections(result);
    } else {
        console.log(status);
    }
}


function createSourceMarker() {
    new google.maps.Marker({
        position: sourceLocation,
        map: map,
        label: {
            text: 'S',
        }
    });
}



var opis = [
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Szkoła Podstawowa</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Odległość :</b>' + '  5 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  5 min</p>' +
    '</div>'+
    '</div>',

    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Galeria MINI</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Odległość :</b>' + '  6 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  6 min</p>' +
    '</div>'+
    '</div>',

    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Kościół</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Odległość :</b>' + '  10 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  10 min</p>' +
    '</div>'+
    '</div>',       
];
var opisIndex = 0;

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';


var markers = [
    iconBase + 'parking_lot_maps.png',
    iconBase + 'library_maps.png',
    iconBase + 'info-i_maps.png'
];
var markersIndex = 0;


function createDestinationMarkers() {
    destinationLocations.forEach(function(location, index) {
        var marker = new google.maps.Marker({
            position: location,
            map:map,
            icon: markers[markersIndex++ % markers.length],
            animation: google.maps.Animation.DROP,
        });

        var infoWindow = new google.maps.InfoWindow({
            content: opis[opisIndex++ % opis.length],                           
        })

        marker.addListener('click', function(){
            infoWindow.open(map, marker);
        });

        marker.addListener('click', function() {
            markerClicked(location);
            });
        })

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
}

Answer 1

如果您只想打开一个InfoWindow，只需创建一个，然后将其移动到相应的标记，并相应地设置内容。

marker.addListener('click', function(){
   infoWindow.setContent(opis[opisIndex++ % opis.length]);                          
   infoWindow.open(map, marker);
});

proof of concept fiddle

代码段

var directionsService;
var directionsDisplay;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 52.285594,
      lng: 16.994291
    },
    zoom: 14
  });
  infoWindow = new google.maps.InfoWindow();
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    markerOptions: {
      visible: false
    }
  });
  createSourceMarker();
  createDestinationMarkers();
}

function markerClicked(destinationLocation) {
  var directionsRequest = {
    origin: sourceLocation,
    destination: destinationLocation,
    travelMode: 'DRIVING'
  };

  directionsService.route(directionsRequest, handleDirectionResults);
}

function handleDirectionResults(result, status) {
  if (status === 'OK') {
    directionsDisplay.setDirections(result);
  } else {
    console.log(status);
  }
}


function createSourceMarker() {
  new google.maps.Marker({
    position: sourceLocation,
    map: map,
    label: {
      text: 'S',
    }
  });
}

var opis = [

  '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h2 id="firstHeading" class="firstHeading">Szkoła Podstawowa</h2>' +
  '<div id="bodyContent">' +
  '<p><b>Odległość :</b>' + '  5 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  5 min</p>' +
  '</div>' +
  '</div>',

  '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h2 id="firstHeading" class="firstHeading">Galeria MINI</h2>' +
  '<div id="bodyContent">' +
  '<p><b>Odległość :</b>' + '  6 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  6 min</p>' +
  '</div>' +
  '</div>',

  '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h2 id="firstHeading" class="firstHeading">Kościół</h2>' +
  '<div id="bodyContent">' +
  '<p><b>Odległość :</b>' + '  10 km' + '<br>' + '<br>' + '<b>Czas dojazdu :</b>' + '  10 min</p>' +
  '</div>' +
  '</div>',

];
var opisIndex = 0;

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var markers = [
  iconBase + 'parking_lot_maps.png',
  iconBase + 'library_maps.png',
  iconBase + 'info-i_maps.png'
];
var markersIndex = 0;

function createDestinationMarkers() {
  destinationLocations.forEach(function(location, index) {
    var opisIndex = markersIndex;
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: markers[markersIndex++ % markers.length],
      animation: google.maps.Animation.DROP,
    });

    marker.addListener('click', function() {
      infoWindow.setContent(opis[opisIndex % opis.length]);
      infoWindow.open(map, marker);
    });
    marker.addListener('click', function() {
      markerClicked(location);
    });
  })

  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
}
google.maps.event.addDomListener(window, "load", initMap);
var sourceLocation = {
  lat: 52.277255,
  lng: 16.995763
};
var destinationLocations = [{
    lat: 52.278568,
    lng: 16.991688
  },
  {
    lat: 52.289379,
    lng: 16.9790611
  },
  {
    lat: 52.287274,
    lng: 16.999355
  }
];

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

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

一个打开的infoWindow点击=其余的infoWindow隐藏

1 个答案: