我在MarkerClustererPlus的AngularJS项目中使用ngMap库。我将mouseover和mouseout事件附加到MarkerClusterer对象。当鼠标悬停在群集上时，我将在该群集的单个InfoWindow中显示所有单个标记的详细信息。每当用户的鼠标从群集中移出时，我想隐藏InfoWindow。现在功能部分正确。当鼠标置于群集计数时，mouseover和mouseout事件将被连续调用，因为InfoWindow变为可见/隐藏，并且它会产生闪烁效果。我错过了代码中的任何内容以消除闪烁吗？
我给你两个例子。 On是使用纯JavaScript，而其他是使用ngMap的AngularJs。还附上了显示我面临的问题的视频。
谢谢！
ngMap + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow闪烁问题
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Dynamic ngMap demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script>
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_
= 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path
</script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($http, $interval, NgMap) {
var vm = this;
vm.dynMarkers = [];
NgMap.getMap().then(function(map) {
vm.map = map;
for (var i=0; i<1000; i++) {
var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
vm.dynMarkers.push(new google.maps.Marker({position:latLng}));
}
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'});
google.maps.event.addListener(vm.markerClusterer, 'mouseover', function(cluster) {
vm.map.showInfoWindow('bar', cluster.getCenter());
});
google.maps.event.addListener(vm.markerClusterer, 'mouseout', function() {
vm.map.hideInfoWindow('bar');
});
});
});
</script>
<style>
map, div[map] {display:block; width:600px; height:400px;}
</style>
</head>
<body>
<h1>Marker Cluster</h1>
<hr />
<div ng-controller="mapController as vm">
<ng-map zoom="2" center="[43.6650000, -79.4103000]" style="display:block; width:600px; height:400px;">
<info-window id="bar" max-width="200">
<div ng-non-bindable>
<div id="bodyContent">
<p>
<b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
sandstone rock formation in the southern part of the
Northern Territory, central Australia.</p>
</div>
</div>
</info-window>
</ng-map>
</div>
</body>
</html>
https://plnkr.co/edit/4Yl8avzyKEgtEYvffIM7?p=preview
https://www.useloom.com/share/0e183dee979e4accb90887ba3d9ba59a
普通JavaScript + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow闪烁问题
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClustererPlus V3 Example</title>
<style type="text/css">
.photo {
box-shadow : 0 0 10px rgba(0, 0, 0, 0.8);
}
.photo-thumblist {
display : inline-block;
margin : -1px 2px;
padding : 0;
position : relative;
}
.photo-longlist {
background-color : #f1f1f1;
border-top : 1px solid #d1d1d1;
border-bottom : 1px solid #d1d1d1;
height : 75px;
overflow : auto;
padding : 7px 7px;
}
.photo-preview {
background-color : #222222;
height : 150px;
width : 100%;
}
.photo-googlemaps {
background-color : #222222;
border : 1px solid #222222;
height : 300px;
width : 100%;
}
.photo-map {
background-color : #222222;
height : 500px;
width : 100%;
}
.photo-map-overlay {
background-color : rgba(255, 255, 255, 0.8);
display : none;
margin : -501px 0 0 1px;
height : 420px;
overflow : auto;
padding : 40px 50px;
position : absolute;
width : 100%;
}
.photo-map-overlayclose {
display : none;
margin : 0 0 0 10px;
position : absolute;
z-index : 100;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script type="text/javascript">
var marker;
var gm_map;
var markerArray = [];
var address = 'Sweden';
var geocoder = new google.maps.Geocoder();
var infoWindow = new google.maps.InfoWindow();
geocoder.geocode({ 'address': address }, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
// gm_map.setCenter(results[0].geometry.location);
// gm_map.fitBounds(results[0].geometry.bounds);
} else {
alert("Unable to complete the geological setting due to the following error:\n\n" + status);
}
});
function initialize() {
var marker, i;
var clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059,13.504026),
map: gm_map,
title:"P1220214 1.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683,13.492057),
map: gm_map,
title:"P1220214 2.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715,13.49631),
map: gm_map,
title:"P1220214 3.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232,13.487384),
map: gm_map,
title:"P1220214 4.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034,13.516566),
map: gm_map,
title:"P1220214 5.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328631,13.485688),
map: gm_map,
title:"P1220214 6.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328657,13.485591),
map: gm_map,
title:"P1220214 7.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501,13.485782),
map: gm_map,
title:"P1220214 8.JPG"
})
]
var options_googlemaps = {
minZoom: 4,
zoom: 18,
center: new google.maps.LatLng(59.328631,13.485688),
maxZoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
google.maps.event.addListener(markerCluster, 'mouseover', function(cluster) {
var markers = cluster.getMarkers();
var array = [];
var num = 0;
for(i = 0; i < markers.length; i++) {
num++;
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>"+array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
});
google.maps.event.addListener(markerCluster, 'mouseout', function() {
infoWindow.close();
});
for(i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
$(document).ready(function() {
// INITIALIZE GOOGLE MAPS
initialize();
// CLOSE
$('body').on('click', '#close-link', function() {
$('#toggle-photolist').fadeOut();
$('#close-overlay').fadeOut();
});
});
</script>
</head>
<body>
<div class="photo-map-overlayclose" id="close-overlay">
<a href="javascript:void(0)" class="noborder-link" id="close-link">Close</a>
</div>
<div class="photo-map" id="google-maps"></div>
<center class="photo-map-overlay" id="toggle-photolist">
<div id="view-singlephoto"></div>
<div id="view-multiblephotos">
<div class="color-miniheadline paddingbottom-5 paddingleft-5" style="text-align: left;">
The following photos was found in a total of <span id="count-photos">0</span>
</div>
<div style="text-align: left;">
<div id="list-photos"></div>
</div>
</div>
</center>
</body>
</html>
http://jsfiddle.net/2onvfwdy/89/
https://www.useloom.com/share/9927951ace714557a3e8d803c96d073f
答案 0 :(得分：2)
在创建infowindow时使用它，它会在图标和信息窗之间产生一点差距
pixelOffset: new google.maps.Size(0, -5)