2

markerwithlabel.js ファイルを追加したので、次のコードを使用して、Google マップにラベル付きのマーカーを正常に表示できます。

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機能しません。何かアイデアはありますか?

4

1 に答える 1

4

First you are using this.id in the hover function. For this to work the elements with class sidelisting have to have ids that match the indexes of markerArray.

Secondly: If markerArray[this.id].labelClass isn't undefined, it is probably "marker_labels" and not the DOMNode. This makes $(markerArray[this.id].labelClass) create either an empty jquery object or a jquery object that refers to the element with the ID "marker_labels". You have to call set on the marker to change any property:

$(".sidelisting").hover(
         function () {
             markerArray[this.id].set("labelClass", "marker_labels hovered")
         },
         function () {
             markerArray[this.id].set("labelClass", "marker_labels")
         }
 );
于 2013-05-21T18:05:33.093 に答える