在div悬停外部地图上打开信箱

Question

我想在悬停划出地图后在googlemap外部显示信息框。在这个代码mastercluster和信息框正常工作，但问题中只显示外部div。

var pop = document.getElementById（'example1'）;

  var locations = <?php echo json_encode($jsArray); ?>; 
      var image = 'images/mapmarker.png';    
      var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]); 
      var myOptions = { 
       zoom: 10, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       disableDoubleClickZoom: false, 
       disableDefaultUI: true, 
       visibleInfoWindow: null, 
       zoomControlOptions: true, 
       zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE 
       } 
      }; 
      var mcOptions = {styles: [{ 
          opt_textColor: 'white', 
          textColor: 'white', 
          height:34, 
          url: image, 
          width:34 
          }], 
          description: ' tracks: click to show' 
         }; 

      var map = new google.maps.Map(document.getElementById("map"), myOptions); 


      var markers = []; 

      for(var i=0;i<locations.length;i++) 
      { 
       var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        icon: image      
       }); 
       boxText = document.createElement("div"); 
       infoboxOptions = { 
          content: boxText, 
          disableAutoPan: false, 
          maxWidth: 0, 
          pixelOffset: new google.maps.Size(18, -60), 
          zIndex: null, 
          boxStyle: { 
           opacity: 0.75, 
           width: "250px" 
          }, 

          infoBoxClearance: new google.maps.Size(1, 1), 
          isHidden: false, 
          pane: "floatPane", 
          enableEventPropagation: false 
         }; 
         markers.push(marker); 


         boxText.style.cssText = "border: 1px solid black; margin-top:3px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 3px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";       
         boxText.innerHTML = "<b>Hotel Name</b>:&nbsp;"+locations[i][2] + "<br/><br/>" + "<b>Rating</b>:&nbsp;"+locations[i][3]+"<br/><br/>"+"<b>Price:</b>&nbsp;&#8364;&nbsp;"+locations[i][4]; 

         markers[i].infobox = new InfoBox(infoboxOptions); 


         pop.onmouseout = generateTriggerCallback(marker[i], 'mouseout'); 
         pop.onmouseover = generateTriggerCallback(marker[i], 'mouseover');  

         $(".popup_slide").hover(function(){ 
          $(this).addClass("resulthover"); 

         }, 
         function() { 
          $(this).removeClass("resulthover"); 
         }); 

         google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
          return function() { 
           markers[i].infobox.open(map, this);         
          } 
         })(marker, i)); 
         google.maps.event.addListener(marker, 'mouseout', (function(marker, i) { 
          return function() { 
           markers[i].infobox.close(map, this);          
          } 
         })(marker, i)); 
        } 
        var markerCluster = new MarkerClusterer(map, markers, mcOptions); 

        function generateTriggerCallback(object, eventType) { 
        return function() { 
         google.maps.event.trigger(object, eventType); 
        }; 
        } 

Answer 1

最后我得到了解决方案，我的问题解决了。我的问题是我有一套位置，我们必须在谷歌地图上显示位置，同时它会显示为地图之外的结果。悬停在结果地图位置外部的增强功能将显示在谷歌地图上。

var locations = <?php echo json_encode($jsArray); ?>; 
      var foo2 = document.getElementById('foo2'); 
      var generateLink = document.getElementById('generateLink'); 
      var image = 'images/mapmarker.png'; 
      var image_hover = 'images/mapmarker_hover.png'; 
      var img29 = 'images/29cluster.png'; 
      var img34 = 'images/34cluster.png'; 
      var img47 = 'images/47cluster.png'; 
      var img56 = 'images/56cluster.png';    
      var clusterStyles = [ 
            { 
            opt_textColor: 'white', 
            textColor: 'white', 
            url: img29, 
            height: 29, 
            width: 29 
            }, 
           { 
            opt_textColor: 'white', 
            textColor: 'white', 
            url: img34, 
            height: 34, 
            width: 34 
            }, 
           { 
            opt_textColor: 'white', 
            textColor: 'white', 
            url: img47, 
            height: 47, 
            width: 47 
            }, 
            { 
            opt_textColor: 'white', 
            textColor: 'white', 
            url: img56, 
            height: 56, 
            width: 56 
            } 
           ]; 
      var visibleInfoWindow = null;    
      var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]); 
      var myOptions = { 
       zoom: 8, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       disableDoubleClickZoom: false, 
       disableDefaultUI: true, 
       visibleInfoWindow: null, 
       zoomControlOptions: true, 
       zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE 
       } 
      }; 
      var mcOptions = { styles: clusterStyles, 
          zoomOnClick: true 

         }; 

      var map = new google.maps.Map(document.getElementById("map"), myOptions);    
      var markers = []; 
      function generateTriggerCallback(object, eventType) { 
         return function() { 
          google.maps.event.trigger(object, eventType); 
         }; 
        } 

      function clearMarkers() { 
      for (var n = 0, marker; marker =markers[n]; n++) { 
       marker.setVisible(false); 
      } 
      } 
      var div = foo2; 
      clearMarkers(); 
      var example = []; 
      for(var i=0;i<locations.length;i++) 
      { 
       var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        icon: image 

       }); 

       boxText = document.createElement("div");   
       infoboxOptions = { 
          content: boxText, 
          disableAutoPan: false, 
          maxWidth: 0, 
          pixelOffset: new google.maps.Size(16, -40), 
          zIndex: null, 
          boxStyle: { 
           opacity: 0.75, 
           width: "250px" 
          },        
          infoBoxClearance: new google.maps.Size(1, 1), 
          isHidden: false, 
          pane: "floatPane", 
          enableEventPropagation: false 
         }; 
         markers.push(marker); 
         var rate = locations[i][3]; 
         if(rate == 1) 
         { 
          var rateimg = "<img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>"; 
         }else if(rate == 2) 
         { 
          var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>"; 
         } 
         else if(rate == 3) 
         { 
          var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>"; 
         }else if(rate == 4) 
         { 
          var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/>"; 
         } 
         else if(rate == 5) 
         { 
          var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/>"; 
         } 
         //define the text and style for all infoboxes 
         boxText.style.cssText = "border: 1px solid black;background:#333; padding:3px;color:#FFF; font-family:Arial; font-size:12px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";       
         boxText.innerHTML = "<div class='marker11'>&nbsp</div><b>Hotel Name</b>:&nbsp;"+locations[i][2] + "<br/>" + "<b>Rating</b>:&nbsp;"+rateimg+"<br/>"+"<b>Price:</b>&nbsp;&#8364;&nbsp;"+locations[i][4]; 
         //Define the infobox 
         markers[i].infobox = new InfoBox(infoboxOptions); 
         $(".popup_slide").hover(function(){        
           $(this).addClass("resulthover");        

         }, 
         function() { 
          $(this).removeClass("resulthover"); 
         }); 
         google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {        
          return function() { 
           markers[i].infobox.open(map, this); 
           marker.setIcon(image_hover); 

          } 
         })(marker, i)); 
         google.maps.event.addListener(marker, 'mouseout', (function(marker, i) { 
          return function() { 
           markers[i].infobox.close(map, this); 
           marker.setIcon(image);         
          } 
         })(marker, i));       
         example[i] = document.getElementById('example' + i);        
         example[i].onmouseover = generateTriggerCallback(marker, 'mouseover'); 
         example[i].onmouseout = generateTriggerCallback(marker, 'mouseout');  

        }//end of for loop 

        var markerCluster = new MarkerClusterer(map, markers, mcOptions); 
        //globalMarker = markers.slice(); 
        google.maps.event.addListener(markerCluster, "mouseover", function (c) { 
         var totalcluster = c.getSize(); 
         var centercluster = c.getCenter(); 
         var m = c.getMarkers(); 
         var p = []; 
         for (var j = 0; j < m.length; j++){ 
         p.push(m[j].getPosition());        
         } 
         //alert(p); 

        }); 
        google.maps.event.addListener(markerCluster, "mouseout", function (c) {      
        });