google.maps.event.addDomListener mousedown w przeglądarce Firefox

Question

wystąpił problem z tym kodem. Mapa nie stała się "nie do przeskanowania" w Firefoksie zaraz po mousedown na div, ale w Chrome jest w porządku.

google.maps.event.addDomListener(div,'mousedown',function(e) { 

    console.log("draggable START ", map.get('draggable')); 
    map.set('draggable', false); 
    console.log("draggable END", map.get('draggable')); 
    google.maps.event.trigger(map, 'resize'); 

}); 

Oto ryba https://jsfiddle.net/benderlio/njyeLujs/

wersja FF 54.0.1 okna 10 Chrome mapa nie jest przeciągany po mysz w dół na białym polu, ale na FF można przesuwać mapę i biały box on mousedown

Dzięki.

Answer 1

Wygląda na to, że powstrzymuje cię od ustawienia przeciągania na mousedown lub mouseup innych funkcji, takich jak alert, itp. Działa dobrze. Ponieważ przeciąganie jest aktywne tylko wtedy, gdy mysz jest wyłączona, możesz użyć mouseover/mouseout, aby obejść ten błąd. Poniższe działa poprawnie w firefox 54.0.1

var map, dragtoggle = true, div; 

    function initMap() { 

     directionsService = new google.maps.DirectionsService(); 
     directionsDisplay = new google.maps.DirectionsRenderer(); 

     map = new google.maps.Map(document.getElementById('map'), { 
      center: { 
       lat: 42.418664992, 
       lng: -71.104832914 
      }, 
      zoom: 13, 
     }); 

      //creating the class to exntend the google map OverlayView class 
      function MapLocationIcon(id,lat,lng,title,icon_class){ 
       this.lat = lat; 
       this.lng = lng; 
       this.title = title; //eg. A,B,C.D 
       this.icon_class= icon_class; //the position of the spritesheet for the icon background 
       this.pos = new google.maps.LatLng(lat,lng); 
      } 

      //make a copy of the OverlayView to extend it 
      MapLocationIcon.prototype = new google.maps.OverlayView(); 
      MapLocationIcon.prototype.onRemove= function(){} 

      //prepare the overlay with DOM 
      MapLocationIcon.prototype.onAdd= function(){ 
       div = document.createElement('DIV'); 
       function toggleDrag(){ 
        if(dragtoggle == true){ 
         map.set('draggable', false); 
         google.maps.event.trigger(map, 'resize'); 
         dragtoggle = false; 

        } else if(dragtoggle == false){ 
         map.set('draggable', true); 
         google.maps.event.trigger(map, 'resize'); 
         dragtoggle = true; 
        } 
       } 
       function DragSwitch(){ 
        $(div).css("cursor", "auto"); 
        dragtoggle = "disabled"; 
       } 
       div.addEventListener('mouseover',toggleDrag,false); 
       div.addEventListener('mouseout',toggleDrag,false); 
       div.addEventListener('mousedown',DragSwitch,false); 
       $(div).addClass('map_icon').addClass(this.icon_class); 
       $(div).css("background-color","white"); 
       $(div).css("width","200px"); 
       $(div).css("height","200px"); 
       $(div).css("cursor", "grab"); 
       $(div).text(this.title); 

       var panes = this.getPanes(); 
       panes.overlayImage.appendChild(div); 

       /* 
       google.maps.event.addDomListener(div,'mouseover',function(e) { 
         map.set('draggable', false); 
         console.log("draggable START ", map.get('draggable')); 
       }); 
       google.maps.event.addDomListener(div,'mouseout',function(e) { 
         map.set('draggable', true); 
         console.log("draggable START ", map.get('draggable')); 
       }); 
       */ 
      } 

      //set position 
      MapLocationIcon.prototype.draw = function(){ 
       var overlayProjection = this.getProjection(); 
       var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
       var panes = this.getPanes(); 
       panes.overlayImage.style.left = position.x + 'px'; 
       panes.overlayImage.style.top = position.y - 30 + 'px'; 
      } 

      //to use it 
      var icon = new MapLocationIcon('id', 42.418664992,-71.104832914, 'AAA', 'gold'); 
      icon.setMap(map); 
    } 

    $("body").on("click", "#dis", function() { 

     map.setOptions({draggable: false}); 
     dragtoggle = "disabled"; 
     $(div).css("cursor", "auto"); 
    }); 
    $("body").on("click", "#en", function() { 

     map.setOptions({draggable: true}); 
     dragtoggle = true; 
     $(div).css("cursor", "grab"); 
    }); 


    google.maps.event.addDomListener(window, 'load', initMap);