谷歌地圖v3：如何刪除標記，刪除，再次循環

我一直在研究谷歌地圖，我想完成以下目標：谷歌地圖v3：如何刪除標記，刪除，再次循環

1）放下標記一個一個;

2）刪除最後一個標記（所以只有一個是視）

3）下降一個標記

4）有信息窗口中的各標誌打開

5）重複操作

我一直在試圖扭曲動畫的代碼，並試圖設置映射null（setMap（null）），但調用drop函數後沒有成功。有關如何做到這一點的任何建議？底線：有像this這樣的東西。當然，這有一大難度，即從數據庫中提取數據。

這裏是code。任何幫助將不勝感激。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Marker animations with <code>setTimeout()</code></title> 
    <style> 
    #map-canvas{ 
      width:600px; 
      height:600px; 
      position: "absolute"; 
      top: 0px; 
      left: 0px; 
      overflow: "hidden"; 
     } 
     </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
var berlin = new google.maps.LatLng(52.520816, 13.410186); 

var neighborhoods = [ 
    new google.maps.LatLng(52.511467, 13.447179), 
    new google.maps.LatLng(52.549061, 13.422975), 
    new google.maps.LatLng(52.497622, 13.396110), 
    new google.maps.LatLng(52.517683, 13.394393) 
]; 

var markers = []; 
var iterator = 0; 
var Marker; 
var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: berlin 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
drop(); 
} 


function drop(){ 
for (var i = 0; i < neighborhoods.length; i++) { 
    var m = neighborhoods[i]; 

    (function(n){ 
     setTimeout(function() { 
     addMarker(n); 
    }, i * 500); 
    }(m)); 
} 
} 
function addMarker() { 
    markers.push(new google.maps.Marker({ 
    position: neighborhoods[iterator], 
    map: map, 
    draggable: false, 
    animation: google.maps.Animation.DROP 
    })); 
    iterator++; 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 

    <div id="map-canvas"></div> 
    </body> 
</html

來源

2013-06-20 user2060451

非常感謝你的幫助！我加載了你的代碼和地圖加載，但沒有標記。爲了加載地圖，我添加了 – user2060451

@ useruser2060451 - 最好在答案上添加這樣的評論，而不是問題。我會在那裏回覆我的答覆。 –

你只需要一個標記同時顯示？

下面是一些代碼，做的是：

$(function() { 
    var BERLIN = new google.maps.LatLng(52.520816, 13.410186); 

    var NEIGBORHOODS = [ 
    new google.maps.LatLng(52.511467, 13.447179), 
    new google.maps.LatLng(52.549061, 13.422975), 
    new google.maps.LatLng(52.497622, 13.396110), 
    new google.maps.LatLng(52.517683, 13.394393)]; 

    var map = null; 
    var marker = null; 
    var index = 0; 
    var infoWindow = null; 

    function createMap() { 
     return new google.maps.Map(document.getElementById('map-canvas'), { 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: BERLIN, 
      zoom: 12 
     }); 
    } 

    function dropMarker(map, pos) { 
     return new google.maps.Marker({ 
      map: map, 
      position: pos, 
      draggable: false, 
      animation: google.maps.Animation.DROP 
     }); 
    } 

    function changeMarker() { 
     if (marker) { 
      infoWindow.close(); 
      marker.setMap(null); 
     } 

     var pos = NEIGBORHOODS[index]; 
     marker = dropMarker(map, pos); 
     infoWindow.setContent('lat: ' + pos.lat() + '<br />' + 'lng: ' + pos.lng()); 
     setTimeout(function() { 
      infoWindow.open(map, marker); 
     }, 500); 

     index = (index + 1) % NEIGBORHOODS.length; 

     setTimeout(function() { 
      changeMarker(); 
     }, 2000); 
    } 

    map = createMap(); 
    infoWindow = new google.maps.InfoWindow() 
    changeMarker(); 
});

通知的changeMarker()功能如何完成其工作，然後使用setTimeout()再次調用自身。這建立了一個無限循環，每兩秒調用一次changeMarker()。

我用setTimeout()由半秒延遲信息窗口的顯示，因此不會出現，直到下降完成。

jsfiddle demo

來源

2013-06-21 04:25:23

我沒有在jsfiddle中做這件事，因爲它不是必需的，但是如果你使用jQuery，你會把上面的代碼放在'$（function（）{...}）'的調用中。這會導致它在頁面準備就緒時執行。我相應地更新了上面的代碼。 –

如果你不使用jQuery，你可以把所有的代碼包裝在名爲「initializePage」的函數中，然後添加' initializePage（）>>'。重要的是你不想只調用'createMap（）'，你想在底部執行所有三行代碼。 –

我沒有聲望給你100分，事實上，甚至沒有一個點。但我確實檢查了正確的答案。這正是我想要完成的。一個問題：這裏是infitne循環（index =（index + 1）％NEIGBORHOODS.length;）？我不明白'％'。非常感謝！！！ – user2060451

谷歌地圖v3：如何刪除標記，刪除，再次循環

回答

相關問題