Google Maps API - 一次只能打开一个infowindow [英] Google Maps API - only one infowindow open at once
本文介绍了Google Maps API - 一次只能打开一个infowindow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我正在处理的地图。我试图一次只打开一个infowindow，当点击地图或其他标记时，打开的infowindow将会关闭。
我知道这个问题已经被提出并且已经回答了好几次，但我试图通过这些例子，并不知道如何将它们应用到我的特定代码中，该代码从Flickr中提取照片并将它们放入与标记绑定的infowindows中。我很确定这个解决方案涉及创建一个infowindow并更改它的内容。
代码段（来自小提琴）：
b
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％;保证金：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> 在全球范围内制作一个单独的infowindow。
重新使用它来显示每个标记的内容。在本例中，我将infowindow的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 ）;
}）;
工作程式码片段：
html {height：100％} body {height：100％;保证金：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>
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 - 一次只能打开一个infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
