隐藏和显示具有相同图标的标记谷歌地图api

时间:2017-06-21 07:51:00

标签: javascript html google-maps google-maps-api-3

我的问题是我想隐藏他们有相同图标的图标然后我可以打印回地图。例如,我有一个计算机图标和一个对讲机图标。在地图中我想隐藏计算机图标,他们将消失。之后,我可以隐藏对讲机图标。然后,我只能将计算机图标打印到地图中。

 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();后无法显示我的标记。我发现了问题。我正在循环,但它无法访问图标图像。那么这实际上这是我的基本问题。但我希望他们成群结队,只能隐藏电脑或只隐藏对讲机。任何帮助都会很棒。感谢您阅读本文,我希望您能帮助我:)有美好的一天..

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。这是糟糕的编码,但我认为它的工作原理。我没有任何问题。代码低于

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