Question

我发现了一种奇怪的转基因行为，并且不知道这是一个错误吗？我使用此代码禁用和启用地图拖动：

＆＃13;

LedgerClosingDP.processReport()

＆＃13;

var dragDisabled = false;
function buttonClicked() {
    if (dragDisabled) {
        enableDrag();
        dragDisabled = false;
    } else {
        disableDrag();
        dragDisabled = true;
    }
}

function disableDrag() {
    map.setOptions({
        draggable: false
    });
    // originally add listeners to map here
}

function enableDrag() {
    map.setOptions({
        draggable: true
    });
    google.maps.event.clearInstanceListeners(map, 'drag');
}

function initMap() {
    map = new google.maps.Map(
        document.getElementById('map'),
        {
            zoom: 8,
            center: {
                lat: -37,
                lng: 176
            }
        }
    );
}

＆＃13;

#map {
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#btn-toggle {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
}

＆＃13;

但在这种情况下，我不能多次禁用拖动。但如果我删除地图监听器清除一切正常。这是一个错误吗？或者有没有办法恢复可拖动选项的工作？我在谷歌找不到任何相关信息。

编辑：我使用下面答案中的地图密钥制作演示代码段。

编辑2：解决此问题的答案是不要使用<button id="btn-toggle" onclick="buttonClicked()">Toggle draggable</button> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>而是使用clearInstanceListeners。但是，如果动态添加听众并且我不知道哪些应该被实际删除呢？

Answer 1

您应该使用clearListeners而不是clearInstanceListeners

我制作了一个示例应用来演示，请参阅下面的代码段：

＆＃13;

var map;
var draggable = true;
var toggle = document.getElementById("btn-toggle");

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    },
    draggable: draggable
  });
}

toggle.addEventListener('click', function() {

  if (draggable) {
    draggable = false;
    disableDrag();
    return;
  }
  draggable = true;
  enableDrag();
});

function disableDrag() {
  map.setOptions({
    draggable: draggable
  });
  // add liteners to map
}

function enableDrag() {
  map.setOptions({
    draggable: draggable
  });
  google.maps.event.clearListeners(map, 'drag');
}

＆＃13;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#btn-toggle {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  padding: 20px;
}

＆＃13;

<html>

<head>
  <title>Draggable</title>
</head>

<body>
  <button id="btn-toggle">Toggle Draggable</button>
  <div id="map"></div>
  <!-- Replace the value of the key parameter with your own API key. -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>

</html>

＆＃13;

清除地图侦听器会导致GoogleMaps V3中的可拖动选项失败

1 个答案: