Javascript 谷歌地图在点击标记之前触发鼠标移出事件
更新1:下面描述的行为似乎不一致,即使在同一个浏览器上也不总是可复制的 更新2:这里是我遇到的另一个行为的截图 第一个Javascript 谷歌地图在点击标记之前触发鼠标移出事件,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,更新1:下面描述的行为似乎不一致,即使在同一个浏览器上也不总是可复制的 更新2:这里是我遇到的另一个行为的截图 第一个mouseover是鼠标第一次在标记上移动时。然后,单击一次,依次触发mouseout,mouseover,最后单击click 原始问题 我正在使用Google Maps JavaScript API在地图上呈现标记,我正在尝试使用mouseover、mouseout和单击事件与之交互 我想在mouseover上显示一个信息窗口,在上锁定打开它,单击并在mouseover上关闭
mouseover
是鼠标第一次在标记上移动时。然后,单击一次,依次触发mouseout
,mouseover
,最后单击click
原始问题
我正在使用Google Maps JavaScript API在地图上呈现标记,我正在尝试使用mouseover
、mouseout
和单击事件与之交互
我想在mouseover
上显示一个信息窗口,在上锁定打开它,单击并在mouseover
上关闭它,除非它被锁定打开
我看到的问题是,mouseout
事件总是在单击
事件之前触发,这会导致信息窗口闪烁,这在概念上是错误的
下面的代码段包含一个repo,没有任何信息窗口,只记录事件触发的顺序
简单地图
html,正文{
身高:100%;
保证金:0;
填充:0;
}
#地图{
身高:100%;
}
#信息{
位置:绝对位置;
排名:0;
左:0;
}
var映射;
函数initMap(){
var Mylatng={lat:-25.363,液化天然气:131.044};
var map=new google.maps.map(document.getElementById('map'){
缩放:4,
中心:myLatLng
});
var marker=new google.maps.marker({
职位:myLatLng,
地图:地图
});
marker.addListener('mouseover',e=>append('mouse over'))
marker.addListener('mouseout',e=>append('mouse out'))
marker.addListener('click',e=>append('click'))
}
函数追加(文本){
var div=document.createElement('div')
div.textContent=文本;
document.getElementById('messages').appendChild(div)
}
我也有同样的问题,但我解决了:对我的代码不屑一顾,我希望他能帮助你成为朋友
var prev_infowindow = false;
$(document).ready(function () {
initialize(30.767172, -4.870733);
ReadyAndRefresh();
});
function initialize(lat,long) {
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
//center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
center: new google.maps.LatLng(lat, long),
zoom:z,
mapTypeId: google.maps.MapTypeId.HYBRID,
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
if (data.TypeProjet==0 )
var image = 'images/map-marker-green.png';
if (data.TypeProjet == 1)
var image = 'images/map-marker-blue.png';
if (data.TypeProjet == 2)
var image = 'images/map-marker-orange.png';
if (data.TypeProjet == 5)
var image = 'images/map-marker-dark.png';
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,
title: data.title,
icon: image
});
(function (marker, data) {
var contentString = '<div id="information" style="overflow: hidden;width :320px;" >' +
'<div style="float :left;margin-right : 5px; ">';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
//Effect Click :
google.maps.event.addListener(marker, 'click', function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
marker.setAnimation(null);
}, 4200); // current maps duration of one bounce (v3.13)
}
});
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "mouseover", function (e) {
// infoWindow.setContent(data.description);
if (prev_infowindow) {
prev_infowindow.close();
}
prev_infowindow = infowindow;
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "dblclick", function (e) {
map.setZoom(16);
//infoWindow.open(map, marker);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker, "mouseout", function (e) {
if (prev_infowindow) {
//prev_infowindow.close();
}
});
})(marker, data);
}
var prev_infowindow=false;
$(文档).ready(函数(){
初始化(30.767172,-4.870733);
ReadyAndRefresh();
});
函数初始化(横向、纵向){
var markers=JSON.parse(“”);
变量映射选项={
//中心:新建google.maps.LatLng(标记[0].lat,标记[0].lng),
中心:新google.maps.LatLng(lat,long),
zoom:z,
mapTypeId:google.maps.mapTypeId.HYBRID,
//马克:对
};
var infoWindow=new google.maps.infoWindow();
var map=new google.maps.map(document.getElementById(“map”)、mapOptions);
对于(i=0;i
通过为每个操作添加测试:google.maps.event.addListener(标记,“mouseout”,函数(e){if(prev_infowindow){//prev_infowindow.close();});这不是一个解决方案,它是针对您非常特定的情况的一个解决方法您在哪个浏览器中看到这个问题?(我在Chrome中没有看到).我在chrome上看到了它,然后在写完问题后我就不再看到它了。我很确定我看到了它,因为我在我的应用程序和我在这里写的复制程序中看到了它,然后它就消失了。真的没有任何线索。