0

我想用 onmouseover 事件而不是 onclick 事件显示信息窗口。

问题是当我将光标位置更改为标记之外时，我的信息窗口消失了，而我的信息窗口中有一个链接。

<!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>

我该怎么做？

4

2 回答 2

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>
于 2012-11-20T18:52:40.530 回答
0

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

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

删除这个infowindow.close();

并在您想要参加另一个活动时将其称为

于 2012-11-20T18:08:27.023 回答