谷歌地图矩形mouseDown和mouseUp事件无法在边界触发
Google maps rectangle mouseDown and mouseUp events fail to fire at borders
矩形形状在mouseover事件中是可编辑的,而setEditable在mouseout事件中应该是false。然而,当我试图通过边缘的mousedown事件来编辑这个形状时,mousedown活动没有被执行(没有看到控制台打印它)。由于触发了mouseout事件,并且setEditable值为false,因此永远不会进行编辑。这种行为只在谷歌浏览器中观察到。在IE和Firefox中,鼠标按下不会被触发,但矩形边框可以根据需要进行编辑。
以下是示例代码:
<!DOCTYPE html>
<html>
<head>
<title>User-editable Shapes</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example adds a user-editable rectangle to the map.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
// [START region_rectangle]
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var myRectangle = new google.maps.Rectangle({
bounds: bounds,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
// [END region_rectangle]
myRectangle.setMap(map);
var isMouseDown = false;
google.maps.event.addListener(myRectangle, "mouseover", function(event) {
myRectangle.setEditable(true);
console.log("Mouse over");
});
google.maps.event.addListener(myRectangle, "mouseout", function(event) {
if (!isMouseDown) {
myRectangle.setEditable(false);
}
console.log("Mouse out");
});
google.maps.event.addListener(myRectangle, "mousedown", function(event) {
isMouseDown = true;
console.log("Mouse down");
});
google.maps.event.addListener(myRectangle, "mouseup", function(event) {
isMouseDown = false;
console.log("Mouse up");
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&signed_in=true&callback=initMap"></script>
</body>
</html>
Solution:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Edit Rectangle Workaround</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 44.5452, lng: -78.5389},
zoom: 9
});
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: false
});
rectangle.setMap(map);
var isMouseDown = false;
google.maps.event.addListener(rectangle, "mouseover", function(event) {
rectangle.setEditable(true);
console.log("Mouse over");
});
google.maps.event.addListener(rectangle, "mouseout", function(event) {
var mouse_event;
for (key in event) {
if (event[key] instanceof MouseEvent) {
mouse_event = event[key];
}
}
if (mouse_event && mouse_event.target && mouse_event.target.parentElement) {
console.log(mouse_event.target.parentElement.style.cursor);
if (/closedhand_8_8/.test(mouse_event.target.parentElement.style.cursor)){
return;
}
}
rectangle.setEditable(false);
console.log("Mouse out");
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&signed_in=true&callback=initMap"></script>
</body>
</html>
相关文章:
- 分派点击事件并保留击键修饰符
- 模糊事件的Javascript测试
- keyup事件处理程序更改焦点不适用于快速键入
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 如何使Javascript动态html表及其上的事件
- 使用类从一个标记中双击事件
- 如何在未直接触发的情况下停止事件
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 对iPad上的点击事件反应缓慢
- 事件和状态
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- 从控制器返回后Ajax启动事件激发
- CSS 溢出边界半径鼠标事件
- 谷歌地图矩形mouseDown和mouseUp事件无法在边界触发
- 打开和关闭jquery点击事件的边界半径
- 传单:当边界改变时触发一个事件
- 当某些事件发生时,在边界容器内显示尾随区域
- 具有边界半径的角中的事件
- jQuery UI .position()鼠标事件跟踪与边界