Google maps - маркеры мигают перед отскоком на mouseover - PullRequest
Новая
       30

Google maps - маркеры мигают перед отскоком на mouseover

3 голосов
/ 07 января 2012

Я построил карту Google, где маркеры отскакивают при опрокидывании некоторых внешних ссылок. Я создал эту короткую функцию для отказов маркера: 

function makeBounce(marker) {
        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function(){ marker.setAnimation(null); }, 750);
}

и я использую это для его выполнения: 

<a onmouseover="javascript:map.panToBounds(bounds);makeBounce(markersArray[1]);"  href="javascript:google.maps.event.trigger(markersArray[1], 'click');">Marker name</a>

Что я заметил, так это то, что перед тем, как маркеры отскочили, они мигают. Это почти незаметно, но этого достаточно, чтобы быть действительно раздражающим (тем более, что собственный пост в блоге Google, запускающий прыгающие маркеры, очень плавный: http://googlegeodevelopers.blogspot.com/2010/12/map-markers-they-move.html).

Я создал JS Fiddle, который демонстрирует это: http://jsfiddle.net/RmDuz/ (переверните синие ссылки, чтобы увидеть проблему).

Я пробовал это в FF9 и Chrome 16, и проблема есть в обоих.

Есть мысли?

Проблема, по-видимому, заключается в том, что изображение маркера динамически (повторно) загружается непосредственно перед отскоком, потому что в Chrome я вижу поле «Нет изображения» непосредственно перед тем, как маркер снова появляется, а затем отскакивает.

РЕДАКТИРОВАТЬ: я изменил код, чтобы использовать слушатель API карт вместо функции javascript, в надежде, что код API может быть немного более эффективным, но не радостно: (

    google.maps.event.addListener(marker, 'dblclick', (function(marker, i) {
        return function() {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(function(){ marker.setAnimation(null); }, 750);
        }
    })(marker, i));

Я использую dblclick, потому что я не хочу наведения мыши, что означало бы, что анимация запускалась при наведении маркеров. Я хочу, чтобы анимация запускалась только при переворачивании внешних ссылок: 

<a onmouseover="javascript:google.maps.event.trigger(markersArray[1], 'dblclick');">Link name</a>

Я обновил скрипку JS, чтобы отразить это: http://jsfiddle.net/RmDuz/1/

1 Ответ

7 голосов
/ 26 января 2012

Я тоже столкнулся с этой проблемой.Оказывается, настройка MarkerOptions optimized: false или draggable: true остановит мигание маркеров перед их анимацией.

Неоптимизированный маркер: 

// Create a non-optimized marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(39.107182, -123.501868),
    map: map,
    optimized: false // stops the marker from flashing
});

// Bounce once
marker.setAnimation(google.maps.Animation.BOUNCE);
marker.setAnimation(null);

Перетаскиваемый маркер: 

// Create a draggable marker
var draggableMarker = new google.maps.Marker({
    position: new google.maps.LatLng(39.107182, -123.501868),
    map: map,
    draggable: true // stops the marker from flashing
});

// Bounce once
draggableMarker.setAnimation(google.maps.Animation.BOUNCE);
draggableMarker.setAnimation(null);

Если вы посмотрите на пример Google вы увидите, что они установили draggable: true.

...