javascript - google.maps.event.addDomListener mousedown 在 Firefox 上

Question

这段代码有问题。在 div 上鼠标按下后， map 在 Firefox 上并没有立即变为“不可拖动”，但在 Chrome 上是可以的。

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

});

这是一个 fiddle https://jsfiddle.net/benderlio/njyeLujs/

FF版本是54.0.1 windows 10 在 chrome 上，鼠标在白框上按下后 map 不可拖动，但在 FF 上，您可以在鼠标按下时移动 map 和白框

谢谢。

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