지도 리스너를 지우면 Google지도에서 드래그 가능한 옵션이 실패합니다. V3

-1

이상한 GM 동작을 발견했으며 버그입니까? 나는 비활성화하고이 코드를 사용하여 드래그지도를 가능 해요 :지도 리스너를 지우면 Google지도에서 드래그 가능한 옵션이 실패합니다. V3

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

#map { 
 
    height: 100%; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#btn-toggle { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 20px; 
 
    z-index: 1; 
 
}

<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>

을하지만,이 경우에 나는 두 번 이상 끌어 비활성화 할 수 없습니다. 하지만지도 청취자 삭제를하면 모든 것이 잘됩니다. 그게 버그 야? 아니면 draggable 옵션을 복원하는 방법이 있습니까? Google에서 관련 정보를 찾지 못했습니다.

EDIT : 아래의 답변에서 maps 키를 사용하여 데모 코드 스 니펫을 만들었습니다.

EDIT 2 :이 문제를 해결하기위한 답은 clearInstanceListeners 대신 clearListeners을 사용하지 않는 것입니다. 그러나 리스너가 동적으로 추가되고 실제로 제거해야하는 항목이없는 경우에는 어떻게해야합니까?

출처

2017-10-09 Alexander Pravdin

대신 clearInstanceListeners

의 clearListeners를 사용해야합니다 내가 보여 아래 코드 볼 수있는 샘플 응용 프로그램 제작 :

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

#map { 
 
    height: 100%; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#btn-toggle { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 20px; 
 
    z-index: 1; 
 
    padding: 20px; 
 
}

<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>

출처

2017-10-10 04:17:00

가 키 PLS 숨기기를 –

내 API 키는 제한됩니다 , 알림을 주셔서 감사합니다 –

'clearListeners' 메서드를 사용하고 있기 때문에 예제가 작동합니다. 하지만'clearInstanceListeners' 메소드를 사용하고 있습니다. 귀하의 예제에서 메소드를 변경하려고 시도했지만 코드가 작동을 멈췄습니다. –

지도 리스너를 지우면 Google지도에서 드래그 가능한 옵션이 실패합니다. V3

답변

관련 문제