анимировать маркеры карт google, когда карта прокручивается в поле зрения

Question

, поэтому у меня есть карта google в нижней части страницы с анимированными маркерами. Маркеры имеют анимацию сбрасывания, но я хочу, чтобы анимация начиналась с отображения прокрутки карты - без этой анимации заканчивается, когда пользователь в конце концов прокручивается вниз, чтобы увидеть карту. Я использую google maps api.

Мой код:

var marker; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 13, 
    center: {lat: 59.325, lng: 18.070} 
    }); 

    marker = new google.maps.Marker({ 
    map: map, 
    draggable: true, 
    animation: google.maps.Animation.DROP, 
    position: {lat: 59.327, lng: 18.067} 
    }); 
    marker.addListener('click', toggleBounce); 
} 

function toggleBounce() { 
    if (marker.getAnimation() !== null) { 
    marker.setAnimation(null); 
    } else { 
    marker.setAnimation(google.maps.Animation.BOUNCE); 
    } 
} 

Answer 1

Вы можете использовать JQuery видно, чтобы проверить, если элемент карты на ваш взгляд виден пользователю. Затем, если вид виден, запустите анимацию.

jquery visible tutorial

jquery visible github

//set an interval that keeps checking if the user can see the map 
//the interval will keep calling your initMap() 
var myVar = setInterval(function() { initMap() }, 10); 

function initMap() { 
// check if the user can see the map using $('#map').visible() 
    if ($('#map').visible()) { 
     //if the user can see the map stop checking 
     clearInterval(myVar); 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 13, 
      center: { lat: 59.325, lng: 18.070 } 
     }); 

     marker = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: { lat: 59.327, lng: 18.067 } 
     }); 
     marker.addListener('click', toggleBounce); 
    } 
} 



function toggleBounce() { 
    if (marker.getAnimation() !== null) { 
     marker.setAnimation(null); 
    } else { 
     marker.setAnimation(google.maps.Animation.BOUNCE); 
    } 
} 

Если вы хотите, вы можете изменить этот код, чтобы загрузить первую карту, а затем добавить маркер, когда пользователь может видеть карту.

//set an interval that keeps checking if the user can see the map 
//the interval will keep calling your initMap() 
var myVar = setInterval(function() { addMarker() }, 100); 

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 13, 
     center: { lat: 59.325, lng: 18.070 } 
    }); 

    function addMarker() { 
     // check if the user can see the map using $('#map').visible() 
     if ($('#map').visible()) { 
      //if the user can see the map stop checking 
      clearInterval(myVar); 

      marker = new google.maps.Marker({ 
       map: map, 
       draggable: true, 
       animation: google.maps.Animation.DROP, 
       position: { lat: 59.327, lng: 18.067 } 
      }); 
      marker.addListener('click', toggleBounce); 
     } 
    } 
} 

Надеюсь, это поможет!

Быстрое примечание, вы можете изменить интервал времени, если хотите ... Я проверяю его каждые 10 миллисекунд.