4

Google マップ V3 に十分に単純な地図があります。

マウスオーバーリスナーイベントでアイコン画像を変更し、マウスアウトで簡単に元に戻します。

マーカーをクリックするとアイコンが再び変わりますが、マーカーが選択されている間はそのアイコンを保持したいです。マウス アウト リスナー イベントでそうするように指示したため、マウス アウトすると、マーカー アイコンが再び変化します。

選択したマーカーをマウスアウト リスナー イベントから除外する必要がありますが、現在選択しているマーカーを見つける方法がわかりません。何か案は？

これが私のコードです

        google.maps.event.addListener(marker, 'mouseover', function () {
            this.setIcon("images/star-3-white.png");

        });
        google.maps.event.addListener(marker, 'mouseout', function () {
                //  this overwrites the image again, 
                //  need to exclude the current one here
                this.setIcon("images/star-3.png");
        });

        google.maps.event.addListener(marker, 'click', function () {
            this.setIcon("images/star-3-white.png");
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
4

3 に答える 3

4

少し長くなりましたが、一意であることがわかっている現在のマーカーのタイトルを格納する変数を追加しました。次に、選択しているものかどうかを確認します。また、すべてのマーカーをリセットして、選択したマーカーと同じ色にならないようにします。

    var clickedMarkerTitle = null;
    function addMarker(latLng, _title, contentString) {
        marker = new google.maps.Marker({
            map: map,
            position: latLng,
            icon: "images/star-3.png",
            title: _title,
            html: contentString
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            this.setIcon("images/star-3-white.png");

        });
        google.maps.event.addListener(marker, 'mouseout', function () {
            //this.setIcon("images/star-3.png");
            testIcon(this);
        });

        google.maps.event.addListener(marker, 'click', function () {
            resetMarkerIcons();
            saveIconState(this);
            this.setIcon("images/star-3-white.png");
            infowindow.setContent(this.html);
            infowindow.open(map, this);

        });

        markersArray.push(marker);

    }
    function resetMarkerIcons() {
        //  reset all the icons back to normal except the one you clicked
        for (var i = 0; i < markersArray.length; i++) {
            markersArray[i].setIcon("images/star-3.png");

        }

    }
    function saveIconState(marker) {
        clickedMarkerTitle = marker.title;
    }
    function testIcon(marker) {
        $('#test').html('<span>' + marker.title + '</span>');

        if (clickedMarkerTitle != null) {
            $('#test').html('<span>' + marker.title + ' and its not null</span>');
            if (marker.title != clickedMarkerTitle) {
                $('#test').html('<span>' + marker.title + ' and ' + clickedMarkerTitle + '</span>');
                marker.setIcon("images/star-3.png");
            }
        }
        else {
            marker.setIcon("images/star-3.png");
        }
    }
于 2012-08-15T15:13:45.270 に答える
4

また

  1. マーカー .selected のメンバーを作成し、それをクリックしたときにそれを設定してから、mouseout 関数 (および完了したい場合は mouseover 関数) でテストします。設定されている場合はアイコンを変更しないでください。
  2. グローバル変数を作成し (一度に 1 つのマーカーのみが選択されていると仮定)、クリックされたマーカーに等しくなるように設定します。マウスアウト (およびマウスオーバー) で、現在のマーカー (this) と等しいかどうかを確認し、そうである場合はアイコンを変更しません。
于 2012-08-15T15:09:53.010 に答える
2

他の何かを検索しているときに、この答えに出くわしました。これで十分です。

var currentMarker = null;
var markerIcon = 'some.svg';
var markerIconHover = 'some-other.svg';

// Initialize marker here
[...]

// Set current marker on click
google.maps.event.addListener(marker, 'click', function() {
    // Reset market icons
    clearMarkerIcons();  
    // Set hovered map marker
    marker.setIcon(markerIconHover);
    // Set current marker
    currentMarker = marker;
    // Open infoWindow here
    [...]
});

// Set correct icon on mouseover
google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(markerIconHover);
});

// Set correct icon on mouseout
google.maps.event.addListener(marker, 'mouseout', function() {
    if (currentMarker !== marker) {
        marker.setIcon(markerIcon);
    }
});

// Clear all set marker icons
function clearMarkerIcons() {
    for (var i = 0; i < map.markers.length; i++) {
        map.markers[i].setIcon(markerIcon);
    }
}
于 2015-04-07T11:54:43.873 に答える