单击时禁用标记

时间:2018-08-06 15:53:05

标签: javascript google-maps

我想禁用单击标记时的标记,以使消息不再重复。 http://code.google.com/apis/maps/documentation/v3/reference.html#Marker

我在另一个类似的问题中发现了此方法setClickable,但它只会使标记消失,而不会禁用它。

<!DOCTYPE html>
<html>
  <head>
      #map {
        height: 50%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="box"></div>
    <script>
      function initMap() {
        var myLatlng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatlng
        });

        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Click to zoom'
        });


        marker.addListener('click', function() {
          var box = document.getElementById("box");
          var para = document.createElement("p");
          var node = document.createTextNode("Paragrap ")
          para.appendChild(node);
          box.appendChild(para);
        });

      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_nzqNDBfJopGdzH2sNBbgHS-iotxkN_c&callback=initMap">
    </script>
  </body>
</html>

https://codepen.io/anon/pen/ejLJOg

1 个答案:

答案 0 :(得分:0)

来自the documentation

  

删除事件监听器
  要删除特定的事件侦听器,必须已将其分配给变量。然后,您可以调用removeListener(),将分配了侦听器的变量名传递给它。

     

var listener1 = marker.addListener('click',aFunction);
     google.maps.event.removeListener(listener1);

在eventListener回调函数中删除侦听器:

var listener = marker.addListener('click', function() {
  var box = document.getElementById("box");
  var para = document.createElement("p");
  var node = document.createTextNode("Paragrap ")
  para.appendChild(node);
  box.appendChild(para);
  google.maps.event.removeListener(listener);
});

代码段:

#map {
  height: 50%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<div id="box"></div>
<script>
  function initMap() {
    var myLatlng = {
      lat: -25.363,
      lng: 131.044
    };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatlng
    });
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Click to zoom'
    });
    var listener = marker.addListener('click', function() {
      var box = document.getElementById("box");
      var para = document.createElement("p");
      var node = document.createTextNode("Paragrap ")
      para.appendChild(node);
      box.appendChild(para);
      google.maps.event.removeListener(listener);
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

相关问题