javascript - 在谷歌地图上使用 jQuery 在鼠标悬停时更改标记的 labelClass

Question

我已经添加了 markerwithlabel.js 文件，并且可以使用以下代码在我的谷歌地图上成功显示带有标签的标记:

markerArray[i] = new MarkerWithLabel({
 position: myLatLng,
 map: map,
 icon: image,
                 labelAnchor: new google.maps.Point(25, 30),
                 labelClass: "marker_labels", // the CSS class for the label
                 labelStyle: {opacity: 0.75},
                 labelContent: format_num(property[6]),
 }
);

当我将鼠标悬停在页面上对应于该标记/标签的另一个元素上时，我想更改标签的类以突出显示它。我尝试过使用 jQuery，但就是无法正常工作:

$(".sidelisting").hover(
             function () {
                 $(markerArray[this.id].labelClass).addClass("hovered");
             },
             function () {
                 $(markerArray[this.id].labelClass).removeClass("hovered");
             }
     );

上面的代码没有在控制台中显示任何 javascript 错误，但是在鼠标悬停时没有任何反应，将它从 labelClass 更改为 label 也不起作用，任何想法？

Answer 1

首先，您在悬停函数中使用了 this.id。为此，具有类 sidelisting 的元素必须具有与 markerArray 的索引匹配的 ID。

其次:如果 markerArray[this.id].labelClass 不是未定义的，它可能是“marker_labels”而不是 DOMNode。这使得 $(markerArray[this.id].labelClass) 创建一个空的 jquery 对象或引用 ID 为“marker_labels”的元素的 jquery 对象。您必须在标记上调用 set 才能更改任何属性:

$(".sidelisting").hover(
         function () {
             markerArray[this.id].set("labelClass", "marker_labels hovered")
         },
         function () {
             markerArray[this.id].set("labelClass", "marker_labels")
         }
 );