谷歌地图矩形mouseDown和mouseUp事件无法在边界触发

Google maps rectangle mouseDown and mouseUp events fail to fire at borders

本文关键字：边界 事件 mouseDown mouseUp 谷歌地图      更新时间：2023-09-26

矩形形状在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>
相关文章：