0

将鼠标悬停在地图之外后，我想在 googlemap 之外显示信息框。在此代码中，mastercluster 和 infobox 工作正常，但仅在 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);
                    };
                    }
4

1 回答 1

0

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

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) {                      
                    });
于 2013-04-04T11:31:10.487 回答