javascript - 本地图滚动到 View 中时动画谷歌地图标记

Question

所以我在带有动画标记的页面底部有谷歌地图。标记有下降动画，但我希望动画在 map 滚动到 View 时开始 - 当用户最终向下滚动以查看 map 时，动画不会结束。我正在使用谷歌地图 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 visible 来检查 View 中的 map 元素是否对用户可见。然后，如果 View 可见，则启动动画。

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);
    }
}

如果您愿意，可以编辑此代码以先加载 map ，然后在用户可以看到 map 时添加标记。

//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 毫秒检查一次。