javascript - Google Maps API - 一次仅打开一个信息窗口

Question

Here is the map I am working on 。我试图一次只打开一个信息窗口，当单击 map 或另一个标记时，打开的信息窗口将关闭。

我知道这个问题已经被问过并回答过好几次了，但我已经尝试过这些例子，但不知道如何将它们应用到我的特定代码中，该代码从 Flickr 中提取照片并将它们放入 infowindows 中绑定(bind)到标记。我很确定解决方案涉及创建一个信息窗口并更改其内容。

updated fiddle displaying issue

代码片段(来自 fiddle ):

var lat = 0;
var long = 0;

$(document).ready(function() {

  $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&jsoncallback=?", displayImages3);

  function displayImages3(data) {


    $.each(data.photos.photo, function(i, item) {

      lat = item.latitude;
      lng = item.longitude;

      var photoURL = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
      var linkURL = 'https://www.flickr.com/photos/' + item.owner + '/' + item.id + '';
      htmlString = '<a href="' + linkURL + '" target="_blank"><img src="' + photoURL + '"></a>';
      var contentString = '<div id="content">' + htmlString + '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      var myLatlngMarker = new google.maps.LatLng(lat, lng);

      var marker = new google.maps.Marker({
        position: myLatlngMarker,
        map: myMap
      });
      marker.setIcon('https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png');

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(myMap, marker);
      });
    });
  }

});

var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);
var mapOptions = {
  center: myLatlngCenter,
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>

Answer 1

在全局范围内创建一个信息窗口。重新使用它来显示每个标记的内容。在此示例中，我将信息窗口的 HTML 内容添加为标记的属性，然后使用 this.htmlContent 在标记单击事件监听器中访问它。

var contentString = '<div id="content">' + htmlString + '</div>';

var myLatlngMarker = new google.maps.LatLng(lat, lng);

var marker = new google.maps.Marker({
  position: myLatlngMarker,
  map: myMap,
  icon: 'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',
  htmlContent: contentString
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(this.htmlContent);
  infowindow.open(myMap, this);
});

工作代码片段:

var lat = 0;
var long = 0;
var infowindow = new google.maps.InfoWindow({});
$(document).ready(function() {

  $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&jsoncallback=?", displayImages3);

  function displayImages3(data) {


    $.each(data.photos.photo, function(i, item) {

      lat = item.latitude;
      lng = item.longitude;

      var photoURL = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
      var linkURL = 'https://www.flickr.com/photos/' + item.owner + '/' + item.id + '';
      htmlString = '<a href="' + linkURL + '" target="_blank"><img src="' + photoURL + '"></a>';
      var contentString = '<div id="content">' + htmlString + '</div>';

      var myLatlngMarker = new google.maps.LatLng(lat, lng);

      var marker = new google.maps.Marker({
        position: myLatlngMarker,
        map: myMap,
        icon: 'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',
        htmlContent: contentString
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.htmlContent);
        infowindow.open(myMap, this);
      });
    });
  }

});

var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);
var mapOptions = {
  center: myLatlngCenter,
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>