Question

我想用onmouseover事件而不是onclick事件显示infowindow。

问题是当我将光标位置从标记中移出时，我的信息窗口会消失，而我在信息窗口中有一个链接。

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>multi-marqueurs</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=true"
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 800px; height: 700px;"></div>

  <script type="text/javascript">
<!--
var locations = [
     ['<span id="ss">Jérôme et Catherine Blondel</span>', 49.898729,3.13606, 5],
      ['Laurent et Sabine Blondel', 50.684142,3.1360678, 4],
      ['Noël et Anne Marie Blondel', 49.953802, 2.360237, 3],
      ['Jean Luc et Catherine Blondel<br /> <a href="http://www.google.com/">GOOGLE</a>', 48.606369,2.886894, 2]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(48.4,1.6),
          mapTypeControl: true,
        mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
     navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
        scaleControl: true,
    streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

   for (i = 0; i < locations.length; i++) { 
    /*var pictureLabel = document.createElement("img");
     pictureLabel.src = "home.jpg";*/
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        /*title    : "CRIAQ",
        icon     : "disk.png"*/
      });


      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

      google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
        return function() {
          infowindow.close(map, marker);
        }
      })(marker, i));
    }
-->
  </script>
</body>
</html>

我该怎么做？

Answer 1

我重写了你的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>multi-marqueurs</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true"
    type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 800px; height: 700px;"></div>

    <script type="text/javascript">
      var infowindow;
      function initialize() {

        var locations = [['<span id="ss">Jérôme et Catherine Blondel</span>', 49.898729, 3.13606, 5], ['Laurent et Sabine Blondel', 50.684142, 3.1360678, 4], ['Noël et Anne Marie Blondel', 49.953802, 2.360237, 3], ['Jean Luc et Catherine Blondel<br /> <a href="http://www.google.com/">GOOGLE</a>', 48.606369, 2.886894, 2]];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom : 6,
          center : new google.maps.LatLng(48.4, 1.6),
          mapTypeControl : true,
          mapTypeControlOptions : {
            style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
          },
          navigationControl : true,
          navigationControlOptions : {
            style : google.maps.NavigationControlStyle.SMALL,
            position : google.maps.ControlPosition.TOP_RIGHT
          },
          scaleControl : true,
          streetViewControl : false,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        infowindow = new google.maps.InfoWindow();

        var marker, i;

        for ( i = 0; i < locations.length; i++) {
          /*var pictureLabel = document.createElement("img");
           pictureLabel.src = "home.jpg";*/
          marker = new google.maps.Marker({
            position : new google.maps.LatLng(locations[i][1], locations[i][2]),
            map : map,
            idx : i,
            location : locations[i]
            /*title    : "CRIAQ",
             icon     : "disk.png"*/
          });

          google.maps.event.addListener(marker, 'mouseover', onMarker_mouseOver);

          google.maps.event.addListener(marker, 'mouseout', onMarker_mouseOut);
        }
      }
      function onMarker_mouseOver() {
        var marker = this;
        console.log();
        infowindow.setContent(marker.get("location")[0]);
        infowindow.open(marker.getMap(), marker);
      }
      function onMarker_mouseOut() {
        infowindow.close();
      }

      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </body>
</html>

Answer 2

将onmouseover添加到你的infowindow并调用使它出现在第一个实例中的相同代码，或调用另一个使div保持可见的函数。如果您的信息窗口触摸标记

，则此方法有效

function onMarker_mouseOut() {
        infowindow.close();
      }

删除此infowindow.close();

并在您想要其他活动时将其称为

鼠标悬停而不是onclick（标记）

2 个答案: