如何在标记簇内的标记上隐藏信息窗口
How can I hide infowindow on markers which are inside marker cluster
我几乎没有带有信息窗口和标记簇的标记。我想在标记成为地图中标记集群的一部分时隐藏标记的信息窗口,并在它们实际单独显示而不是在集群中显示时显示 tem。
标记和信息窗口的代码是这样的:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
...
});
var myOptions = {
.......
};
infowindow = new InfoBox(myOptions);
infowindow.open(map, marker);
markers.push(marker);
然后我有标记簇
var markerCluster = new MarkerClusterer(map, markers,markerClustererOptions);
有人可以提供 code/suggestions/link 如何处理这个问题
观察标记的map_changed
事件。当标记的map
-属性为空时,关闭信息窗口,否则打开
google.maps.event.addListener(marker,'map_changed',function(){
if(this.getMap()){
infowindow.open(this.getMap(),this);
}
else{
infowindow.close();
}
});
示例:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
(function(photo) {
var latLng = new google.maps.LatLng(photo.latitude,
photo.longitude),
marker = new google.maps.Marker({
position: latLng
});
console.log(photo)
markers.push(marker);
var infowindow = new InfoBox({
content: '<img src="http://mw2.google.com/mw-panoramio/photos/thumbnail/' + photo.photo_id + '.jpg" />',
disableAutoPan: true,
closeBoxURL: "",
pane: "floatPane"
});
google.maps.event.addListener(marker, 'map_changed', function() {
if (this.getMap()) {
infowindow.open(this.getMap(), this);
} else {
infowindow.close()
}
});
}(data.photos[i]));
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
margin: 0;
padding: 0;
height: 100%;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
我几乎没有带有信息窗口和标记簇的标记。我想在标记成为地图中标记集群的一部分时隐藏标记的信息窗口,并在它们实际单独显示而不是在集群中显示时显示 tem。
标记和信息窗口的代码是这样的:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
...
});
var myOptions = {
.......
};
infowindow = new InfoBox(myOptions);
infowindow.open(map, marker);
markers.push(marker);
然后我有标记簇
var markerCluster = new MarkerClusterer(map, markers,markerClustererOptions);
有人可以提供 code/suggestions/link 如何处理这个问题
观察标记的map_changed
事件。当标记的map
-属性为空时,关闭信息窗口,否则打开
google.maps.event.addListener(marker,'map_changed',function(){
if(this.getMap()){
infowindow.open(this.getMap(),this);
}
else{
infowindow.close();
}
});
示例:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
(function(photo) {
var latLng = new google.maps.LatLng(photo.latitude,
photo.longitude),
marker = new google.maps.Marker({
position: latLng
});
console.log(photo)
markers.push(marker);
var infowindow = new InfoBox({
content: '<img src="http://mw2.google.com/mw-panoramio/photos/thumbnail/' + photo.photo_id + '.jpg" />',
disableAutoPan: true,
closeBoxURL: "",
pane: "floatPane"
});
google.maps.event.addListener(marker, 'map_changed', function() {
if (this.getMap()) {
infowindow.open(this.getMap(), this);
} else {
infowindow.close()
}
});
}(data.photos[i]));
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
margin: 0;
padding: 0;
height: 100%;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>