google.maps.event.addDomListener mousedown on Firefox

Question

このコードに問題があります。 divのmousedown直後にFirefox上で地図が「紛らわしくない」とはならなかったが、Chrome上で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'); 

}); 

フィドルhttps://jsfiddle.net/benderlio/njyeLujs/

FFバージョン54.0.1ウィンドウで10 はChromeでマップがダウンホワイトボックス上でマウスの後にドラッグ可能ではありませんが、FFには、マップと白を移動することができますですmousedownのボックス

ありがとう。

Answer 1

mousedownやmouseupでdraggableを設定するのを止めているようですが、アラートなどの他の機能はうまく動作します。ドラッグ可能なのは、マウスがダウンしているときだけアクティブなので、mouseover/mouseoutを使用してこのバグを回避できます。以下は、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);