这个代码遇到了一些问题。在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上的白框
感谢。
答案 0 :(得分:5)
它似乎阻止你在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);