Google Maps API - 一次只打开一个信息窗口 [英] Google Maps API - only one infowindow open at once

查看：10
本文介绍了Google Maps API - 一次只打开一个信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我正在制作的地图.我试图一次只打开一个信息窗口，当点击地图或其他标记时，打开的信息窗口将关闭.

我知道这已经被多次询问和回答，但我已经尝试过这些示例，但无法弄清楚如何将它们应用于我的特定代码，该代码从 Flickr 中提取照片并将它们放入信息窗口绑定到标记.我很确定该解决方案涉及创建单个信息窗口并更改其内容.

更新小提琴显示问题

代码片段(来自小提琴):

var lat = 0;无功长= 0;$(document).ready(function() {$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&17%40N05&1805&1805&1805&18&ajsoncallback=?", displayImages3);功能显示图像3(数据){$.each(data.photos.photo, function(i, item) {纬度 = 项目.纬度；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 + '

';var infowindow = new google.maps.InfoWindow({内容:内容字符串});var myLatlngMarker = new google.maps.LatLng(lat, lng);var 标记 = 新的 google.maps.Marker({位置:myLatlngMarker，地图:我的地图});marker.setIcon('https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png');google.maps.event.addListener(marker, 'click', function() {infowindow.open(myMap, 标记);});});}});var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);var mapOptions = {中心:myLatlngCenter，变焦:6，mapTypeId: google.maps.MapTypeId.ROADMAP};var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

html {高度:100%}身体 {高度:100%；边距:0；填充:0}#map_canvas {高度: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>

解决方案

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

var contentString = '
'+ htmlString + '
';var myLatlngMarker = new google.maps.LatLng(lat, lng);var 标记 = 新的 google.maps.Marker({位置:myLatlngMarker，地图:我的地图，图标:'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',htmlContent: 内容字符串});google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.htmlContent);infowindow.open(myMap, this);});

工作代码片段:

var lat = 0;无功长= 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&17%40N05&1805&1805&1805&18&ajsoncallback=?", displayImages3);功能显示图像3(数据){$.each(data.photos.photo, function(i, item) {纬度 = 项目.纬度；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 + '

';var myLatlngMarker = new google.maps.LatLng(lat, lng);var 标记 = 新的 google.maps.Marker({位置:myLatlngMarker，地图:我的地图，图标:'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',htmlContent: 内容字符串});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 = {中心:myLatlngCenter，变焦:6，mapTypeId: google.maps.MapTypeId.ROADMAP};var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

html {高度:100%}身体 {高度:100%；边距:0；填充:0}#map_canvas {高度: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>

Here is the map I am working on. I'm trying to have only one infowindow open at a time, and the open infowindow will close when the map or another marker is clicked.

I know this has been asked and answered several times already, but I've attempted to go through those examples and can't figure out how to apply them to my specific code, which pulls photos from Flickr and puts them in infowindows tied to markers. I'm pretty sure the solution involves creating a single infowindow and changing its content.

updated fiddle displaying issue

code snippet (from 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>

解决方案

Make a single infowindow in the global scope. Re-use it to display the content for each marker. In this example I add the HTML content for the infowindow as a property of the marker, then access it in the marker click event listener with 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);
});

working code snippet:

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"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>

这篇关于Google Maps API - 一次只打开一个信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆