2017-09-26 25 views
0

我正在试图触发我的google.maps.Animation.DROP滚动到页面的某个部分。我正在成功触发标记放在地图上;然而,相同的标记会多次落在相同的位置。当地图可见时,是否有一种方法可以让标记掉落一次?Google Maps API标记放在滚动条上

这里是我当前的代码:

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(); 
    } 
}); 
+1

怎么样设置变量,一旦您的标记是如此下降的标记他们不会再次下降? – MrUpsidown

+0

@MrUpsidown我试着在drop函数的末尾设置一个布尔型'var dropped = false'并设置'dropped = true',但没有运气...... –

+0

对不起,这段代码似乎很差。为什么每次在Windows滚动时删除和添加标记?你到底在想什么? – krishnar

回答

2

只是不叫降功能,如果有已经在你的地图

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