谷歌地图API-一次只打开一个信息窗口
Google Maps API - only one infowindow open at once
这是我正在处理的地图。我试图一次只打开一个信息窗口,当点击地图或其他标记时,打开的信息窗口将关闭。
我知道这个问题已经被问过好几次了,但我试图浏览这些例子,但不知道如何将它们应用到我的特定代码中,该代码从Flickr中提取照片,并将它们放在与标记相关的信息窗口中。我确信这个解决方案包括创建一个单独的信息窗口并更改其内容。
更新小提琴显示问题
代码片段(来自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>
在全局范围中创建一个信息窗口。重新使用它可以显示每个标记的内容。在本例中,我将信息窗口的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>
相关文章:
- Javascript.如何用javascript将信息发送到另一个网站
- 为位于路线上的谷歌地图标记(起点和终点)设置一个信息窗口
- 用javascript将信息/变量从一个网页传递到另一个网页
- 如何在显示多个标记时单击另一个标记时关闭信息窗口
- SuiteScript:如何有一个自定义的数据字段来从数据库加载信息
- 如何在HTML中创建一个信息框,显示与悬停SVG路径相关的信息
- 在谷歌地图的一个信息框中组合两个标记的内容
- FB.getLoginStatus完成后,我想返回一个信息数组
- 从一个数组中自动显示一个信息窗口
- 一个信息窗口谷歌地图标记内的多个优惠
- 谷歌地图一个信息框打开
- 谷歌地图API-一次只打开一个信息窗口
- 谷歌地图,只添加最后一个信息窗口
- 当另一个信息窗口打开时关闭
- 一次只打开一个信息窗口,谷歌地图
- Wordpress高级自定义字段,谷歌地图,一次只打开一个信息窗口
- 如何使用e.PageX和e.PageY值定位一个信息窗口
- 如何只显示一个信息窗口时,单击标记
- Google Maps API v3(一次打开一个信息窗口)
- 将eventlistener添加到锚点,以在googlemapsapv3中提示一个信息窗口