鼠標移動而不是點擊（標記）

我想用onmouseover事件而不是onclick事件來顯示infowindow。鼠標移動而不是點擊（標記）

問題是當我將光標位置從標記中移出時，我的infowindow消失了，而在我的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>

我應該怎麼做？

來源

2012-11-20 Zied Ellouze

將onmouseover添加到您的infowindow中，並調用使其出現在第一個實例中的相同代碼或調用另一個可以讓div可見的函數。這工作，如果你的信息窗口碰你的標記

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

刪除此infowindow.close();

，並調用它的時候，你想在另一個事件

來源

2012-11-20 18:08:27

是你有這個解決方案 –

我重寫代碼：

<!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-20 18:52:40 wf9a5m75

鼠標移動而不是點擊（標記）

回答

相關問題