如何在带有标签的谷歌地图上悬停标记

Question

如何在带有标签的谷歌地图上悬停标记

javascriptgoogle-mapsgoogle-maps-markers

3

我正在使用Google地图上的MarkerWithLabel，当我在鼠标悬停在标记上时，它不会显示对话框信息。只有在点击标记时才会显示。以下是我使用的一些CSS：

<style>     
.labels {
 margin-top:-3px;
 padding: 5px;
 position: absolute;
visibility: visible;
z-index: 1030;
}
.labels.active .inner {
    background: cyan;
}
.labels.hover .inner {
    background-color: yellow;
}   
.labels .arrow{
    border-top-color: #ff5a5f;
    border-right-color: rgba(0,0,0,0);
    border-bottom-color: rgba(0,0,0,0);
    border-left-color: rgba(0,0,0,0);
    border-width: 5px 5px 0;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
}
.labels .inner{
    background-color: #ff5a5f;
    border-radius: 4px;
    color: #FFFFFF;
    max-width: 200px;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;  
}   
.labels.active .arrow {     
    border-top-color: #00ffff;
    border-right-color: rgba(0,255,255,0);
    border-bottom-color: rgba(0,255,255,0);
    border-left-color: rgba(0,255,255,0);
}
.labels.hover .arrow {
    border-top-color: #ffff00;
    border-right-color: rgba(255,255,0,0);
    border-bottom-color: rgba(255,255,0,0);
    border-left-color: rgba(255,255,0,0);
}

以及 JavaScript：

    function initMap() {
     var latlng = new google.maps.LatLng(21.0241852,105.8292388);   
     var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 16,   /*16*/
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
       });

    var cityHightlight;
        //DRAW THE POLYGON OR POLYLINE
        cityHightlight = new google.maps.Polygon({
        paths: hanois,
        strokeColor: "#F85555",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FFFFFF",
        fillOpacity: 0.35
        });
        cityHightlight.setMap(map);

        // create a bounds object
        var bounds = new google.maps.LatLngBounds();                          
        var latLng = new google.maps.LatLng(23.23333, 105.2325512);                 

        bounds.extend(latLng);                          
            var markerMap = new MarkerWithLabel({
                position: latLng,
                draggable: true,
                raiseOnDrag: true,
                map: map,   
                labelContent: "<div class='arrow'></div><div class='inner'>998888</div>",
                labelAnchor: new google.maps.Point(30, 30),
                labelClass: "labels", // the CSS class for the label
                isClicked: false
                });

                var windowDialog = new google.maps.InfoWindow({
                    content: "<img height='180px' width='300px' src='images.car.jpg' />"
                            +"<h5>855555</h5>"  
                            +"Infor of dialog marker"
                            + "<br>"                                                                                        
                        });
                    google.maps.event.addListener(markerMap, "click", function (e) { windowDialog.open(map, this); });                                                                                  
                    map.fitBounds(bounds);
                }       
            initMap();

如何解决当鼠标悬停在标记上并显示对话框时出现的问题，谢谢！

- Khanh Luong Van

请提供一个fiddle来展示你的代码。 - undefined

嗨@VinodLouis，我可以提供任何东西，但我不明白'fiddle'是什么意思。 - undefined

https://fiddle.jshell.net/ 这里可以创建您的代码工作示例，因为没有人会理解 hanois 的价值。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScaisEdge · Accepted Answer

你的代码中有一个点击监听器

google.maps.event.addListener(markerMap, "click", function (e) { 
               windowDialog.open(map, this);
 });

但是对于悬停效果，您应该使用mouseover和mouseout，例如使用infowindow。

markerMap.addListener('mouseover', function() {
    infowindow.open(map, this);
});

// assuming you also want to hide the infowindow when user mouses-out
markerMap.addListener('mouseout', function() {
    infowindow.close();
});