Question

我有一张谷歌地图地图，并在那里有一些MarkerWithLabels。当用户将鼠标悬停在标记上时，我想显示有关标记的一些其他信息。 E.g。

Not hovering => 10
Hovering => 10 people

但是，底部文本应该是另一种颜色，所以我认为我最好使用跨度来更改两个文本的文本颜色。我已经完成了这个

googleMaps.event.addListener(marker, 'mouseover', function () {
    var mouseoverImg = new googleMaps.MarkerImage('/images/pin_xl.png', null, null, null, new googleMaps.Size(53, 72));
    this.setIcon(mouseoverImg);
    this.set('labelClass' ,'' );
    this.set('labelContent', "<p class='startContinentCountryBigTop'>" + poiObject.count + "</p><br><p class='startContinentCountryBigBot'>" + cities + "</p>");
    this.set('labelAnchor', new googleMaps.Point(20, 65));
});
googleMaps.event.addListener(marker, 'mouseout', function () {
    this.setIcon(markerImage);
    this.set('labelContent', poiObject.count);
    this.set('labelAnchor', new google.maps.Point(11, 42.5));
    this.set('labelClass' ,'startContinentCountrySmall' );
});

问题是，对于跨度，只要我鼠标悬停在标记上，鼠标输出功能也会被触发。所以标记得到的重复性更小/更大。当我删除跨度并且只使用文本时它可以正常工作，但底部文本需要具有不同的颜色和不同的文本大小。这个问题有哪些解决方法？

这些是我的CSS课程

span {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.startContinentCountrySmall {
    cursor: pointer;
    color: #bdc3c7;
    font-size: 14pt;
    font-weight: 100;
}

.startContinentCountryBigTop {
    cursor: pointer;
    color: #bdc3c7;
    font-size: 14pt;
    font-weight: 100;
    width: 100%;
}
.startContinentCountryBigBot {
    cursor: pointer;
    color: #f69d00;
    font-size: 10pt;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
}

一些其他信息：似乎是问题，您无法将HTML元素添加到MarkerWithLabel。即使我创建了像这样的节点

var newDiv          = document.createElement("span");
newDiv.className    = "startContinentCountryBigTop";
newDiv.innerHTML    = poiObject.count;

它不起作用。将鼠标悬停在包含HTML标记的标记上的文本

时，会出现此问题

我希望你能理解这个问题。一旦我开始使用span作为标记上的文本，mouseover和mouseout监听器就会一直同时触发。有什么想法吗？

使用带有鼠标悬停/鼠标悬停功能的MarkerWithLabel上的span

0 个答案: