簡體   English   中英

隱藏和顯示具有相同圖標的標記Google Map API

[英]Hiding And Showing a marker which have same icons google map api

我的問題是我想隱藏具有相同圖標的圖標,然后再打印回地圖。 例如,我有一個計算機圖標和一個對講機圖標。 我想在地圖上隱藏計算機圖標,它們將消失。 之后,我可以隱藏對講機圖標。 然后,我只能將計算機圖標打印到地圖中。

 var marker = new google.maps.Marker({
                position: location,
                 map: map,
                 icon: img,
                 title: x
                });
                markers.push(marker);

我正在推動這樣的標記。 而且我有捉迷藏的桌子。

<div id="marker-panel">
  <input onclick="clearMarkers();" type=button value="Hide Markers">
  <input onclick="showMarkers();" type=button value="Show All Markers">
</div>

他們的功能是這樣的

    function setMapOnAll(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
        var imagebox = document.getElementById('images').value;
        markers[i].setIcon(imagebox);
        window.alert('Loop');
      }
    }

  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
}

我的第一個問題是我單擊showMarkers();之后無法顯示我的標記。 我發現了問題。 我正在正確地執行循環,但無法訪問圖標圖像。 好吧,這實際上是我的基本問題。 但我希望它們像只隱藏計算機或只隱藏對講機一樣分組。 任何幫助都會很棒。 感謝您閱讀本文,希望您能幫到我:)祝你有美好的一天..

我解決了問題。 這是不好的編碼,但我猜它能起作用。 我沒有任何問題。 代碼在下面

 if(document.getElementById('images').value == 'computer.png'){
                var x = 'The elevation at this point is ' +
                results[0].elevation + ' meters.';
                var marker = new google.maps.Marker({
                position: location,
                 map: map,
                 icon: img,
                 title: x
                });
                computer.push(marker);
                //sağ tık silme fonksiyonu
                google.maps.event.addListener(marker, 'rightclick', function(event) {
                marker.setMap(null);
               });
              }
              else {// telsiz
                var x = 'The elevation at this point is ' +
                results[0].elevation + ' meters.';
                var marker = new google.maps.Marker({
                position: location,
                 map: map,
                 icon: img,
                 title: x
                });
                telsiz.push(marker);}
                google.maps.event.addListener(marker, 'rightclick', function(event) {
                marker.setMap(null);
               });
            }


    function setMapOnAll(map) {
        for (var i = 0; i < computer.length+telsiz.length; i++) {
          computer[i].setMap(map);
          for(var j=0; j < telsiz.length; j++){
            telsiz[i].setMap(map);
          }
        }
    }

  function clearComputer(map) {
    for(var i = 0; i<computer.length; i++){
      computer[i].setMap(null);
    }
  }

  function clearTelsiz(map) {
    for(var i = 0; i<telsiz.length; i++){
      telsiz[i].setMap(null);
    }
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM