javascript - 在 Google map 上使用 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")
         }
 );