マップリスナーをクリアすると、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

あなたはclearListeners代わりのclearInstanceListenersに

を使用する必要があります私が実証するサンプルアプリを作った、以下のコードを参照してください。

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

マイAPIキーが制限されている –

あなたのキーのplsを隠します、ありがとうございましたtho –

'clearListeners'メソッドを使用しているため、あなたのサンプルが動作しています。しかし、私は 'clearInstanceListeners'メソッドを使用しています。あなたの例でメソッドを変更しようとしましたが、コードが機能しなくなりました。 –

マップリスナーをクリアすると、Googleマップでドラッグ可能なオプションが失敗するV3

答えて

関連する問題