Question

这个代码遇到了一些问题。在mousedown on div之后，地图并没有立即在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');   

});

这是一个小提琴https://jsfiddle.net/benderlio/njyeLujs/

FF版本是54.0.1 windows 10 在Chrome上，在白色框上鼠标按下后地图不可拖动，但在FF上你可以移动地图和mousedown上的白框

感谢。

Answer 1

它似乎阻止你在mousedown或mouseup上设置draggable其他功能，如alert等工作正常。由于只有在鼠标停止时才可以执行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);

Firefox上的google.maps.event.addDomListener mousedown

1 个答案: