Question

更新1：即使在同一个浏览器上，下面描述的行为似乎也不一致且并不总是可重现

更新2：这是我遇到的另一种行为的屏幕截图

第一个mouseover是鼠标首次在标记上移动的时间。然后，只需单击一次，就会按顺序mouseout，mouseover和最后click触发。

原始问题

我使用Google Maps JavaScript API在地图上呈现标记，我尝试使用mouseover，mouseout和click进行互动事件

我想在mouseover上显示一个信息窗口，在click上将其锁定并在mouseover 上关闭，除非已锁定开。

我看到的问题是mouseout事件总是在click事件之前触发，这会导致信息窗口闪烁，除了在概念上错误。

下面的代码段包含一个repro，没有任何信息窗口，只是记录触发事件的顺序。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="google maps marker events">
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #messages {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="messages"></div>
    <script>
      var map;
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map
        });
        
        marker.addListener('mouseover',  e => append('mouse over'))
        marker.addListener('mouseout',  e => append('mouse out'))
        marker.addListener('click',  e => append('click'))
      }
      
      function append(text) {
        var div = document.createElement('div')
        
        div.textContent = text;
        
        document.getElementById('messages').appendChild(div)
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer></script>
  </body>
</html>

＆＃13;

如果这是谷歌地图API库中的错误或者它是一种已知的行为，可能是已知的解决方法吗？

Answer 1

我有同样的问题，但我解决了这个问题：lokk at my code我希望你的朋友知道。

 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);
}

谷歌地图触发鼠标输出事件，然后点击标记

1 个答案: