Google Maps API Marker Drop onScroll

J'essaie actuellement de déclencher mon google.maps.Animation.DROP lorsque vous faites défiler vers une partie de la page. J'obtiens le succès déclenchant les marqueurs à tomber sur la carte; Cependant, les mêmes marqueurs tomberont au même endroit plusieurs fois. Y a-t-il un moyen pour les marqueurs de tomber une seule fois quand la carte est visible?Google Maps API Marker Drop onScroll

Voici mon code actuel:

var cities = [ 
    //tokyo 
    {lat: 35.6895, lng: 139.6917}, 
    //fukoka 
    {lat: 33.5904, lng: 130.4017}, 
    //bangkok 
    {lat: 13.7563, lng: 100.5018}, 
    //seoul 
    {lat: 37.5665, lng: 126.9780}, 
    //taipei 
    {lat: 25.0330, lng: 121.5654}, 
    //hong kong 
    {lat: 22.3964, lng: 114.1095}, 
    //shanghai 
    {lat: 31.2304, lng: 121.4737}, 
    //xiamen 
    {lat: 24.4798, lng: 118.0894}, 
    //macau 
    {lat: 22.1987, lng: 113.5439}, 
    //phnom penh 
    {lat: 11.5449, lng: 104.8922}, 
    //vientiane 
    {lat: 17.9757, lng: 102.6331}, 
    //chiang mai 
    {lat: 18.7061, lng: 98.9817}, 
    //kyoto 
    {lat: 35.0116, lng: 135.7680}, 
    //osaka 
    {lat: 34.6937, lng: 135.5022}, 
    //guam 
    {lat: 13.4443, lng: 144.7937}, 
    //san francisco 
    {lat: 37.7749, lng: -122.4194}, 
    //las vegas 
    {lat: 36.1699, lng: -115.1398}, 
    //los angeles 
    {lat: 34.0522, lng: -118.2437}, 
    //paris 
    {lat: 48.8566, lng: 2.3522}, 
    //brussels 
    {lat: 50.8503, lng: 4.3517}, 
    //amsterdam 
    {lat: 52.3702, lng: 4.8952} 
]; 

var markers = []; 
var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: 25.0330, lng: 121.5654} 
    }); 
} 

function drop() { 
    clearMarkers(); 
    for (var i = 0; i < cities.length; i++) { 
    addMarkerWithTimeout(cities[i], i * 200); 
    } 
} 

function addMarkerWithTimeout(position, timeout) { 
    window.setTimeout(function() { 
    markers.push(new google.maps.Marker({ 
     position: position, 
     map: map, 
     animation: google.maps.Animation.DROP 
    })); 
    }, timeout); 
} 

function clearMarkers() { 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(null); 
    } 
    markers = []; 
} 

$(window).scroll(function() { 
    var hT = $('#map').offset().top, 
     hH = $('#map').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)) { 
     drop(); 
    } 
});

Source

2017-09-26 Lawrence Liu

Qu'en est-il fixer une variable une fois que vos marqueurs ont été abandonnées afin ils ne sont pas tombés à nouveau? – MrUpsidown

@MrUpsidown J'ai essayé de définir un Booléen 'var drop = false' et j'ai défini' droped = true' à la fin de la fonction drop mais je n'ai pas eu de chance .... –

Désolé de le dire, mais votre code semble très mauvais . pourquoi chaque fois que vous supprimez et ajoutez des marqueurs lorsque les fenêtres défilent? Qu'est-ce que vous essayez exactement de réaliser? – krishnar

juste ne pas appeler la fonction de chute s'il y a déjà des marqueurs dans votre carte

if(markers.length == 0) { 
    drop(); 
}

Source

2017-09-29 06:51:41

Google Maps API Marker Drop onScroll

Répondre

Questions connexes