google.maps.event.addDomListener mousedown auf Firefox

Question

habe ein Problem mit diesem Code. Die Karte wurde nicht sofort nach dem Mousedown auf div auf Firefox "unverwürgbar", aber auf Chrome ist ok.

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

}); 

Hier ist eine Geige https://jsfiddle.net/benderlio/njyeLujs/

FF Version 54.0.1 Fenster 10 Auf Chrom die Karte nicht ziehbar nach Maus ist nach unten auf weißem Feld, sondern auf FF können Sie die Karte und den weißen bewegen Box auf mousedown

Danke.

Answer 1

Es scheint zu stoppen Sie von DragGable auf MouseDown oder MouseUp setzen andere Funktionen wie Alarm, usw. funktionieren gut. Da ziehbares Objekt nur aktiv ist, wenn die Maus nicht aktiv ist, können Sie dieses Problem mit mouseover/mouseout umgehen. Das folgende funktioniert gut in 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);