0

我正在尝试获得以下行为。当我单击地图时，我希望开始出现一个矩形。作为移动鼠标（而不是拖动），我希望矩形能够自我调整以适应第一次单击和鼠标位置。

当我第二次单击鼠标时，我想捕获角坐标（用于空间搜索查询），然后让矩形停止调整大小。

在第三次鼠标单击时，我希望矩形消失。

目前矩形出现并调整大小，但它永远不会停止跟随鼠标。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#map { width: 750px; height: 500px; }
</style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"/></script>
<script type="text/javascript">
var start = new google.maps.LatLng();
var clicked=0;
    window.onload = function()
    {
        var settings = {
            mapTypeId: google.maps.MapTypeId.TERRAIN, // map type
            zoom: 8, // map type
            center: new google.maps.LatLng(-33.890542, 151.274856) // coordinates
        };
        var map = new google.maps.Map(document.getElementById("map"), settings);

        rectangle = new google.maps.Rectangle();

        google.maps.event.addListener(map, 'click', function(event) {
            loc = event.latLng;
            if(clicked==0){
                $("#start").html(loc.toString());
                start=loc;
                // start the rectangle
                var rectOptions = {
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35,
                    map: map
                };
                rectangle.setOptions(rectOptions);  
                clicked=1;
            }
            else if(clicked==1){
                $("#end").html(loc.toString());
                clicked=2;
    alert("clicked "+clicked);
            }
            else if(clicked==2){
                $("#start").html("");
                $("#dragged").html("");
                $("#end").html("");
                clicked=0;
            }
        });

        google.maps.event.addListener(map, 'mousemove', function(event) {
            if(clicked==1){
            loc = event.latLng;
            $("#dragged").html(loc.toString());
            $("#dragged").html(loc.toString());
            var bounds = new google.maps.LatLngBounds();
            bounds.extend(start);
            bounds.extend(loc);
            rectangle.setBounds(bounds);
            }
            else if(clicked==2){
alert("mouseover: "+clicked);
            rectangle.setMap(null);
            }
        });
    };
</script>
</head>
<body>
<div id="map"></div>
</body>
4

1 回答 1

1

我刚刚遇到了同样的问题，我刚刚注意到这篇文章有多老了。每个有这个问题的人，你需要检查https://developers.google.com/maps/documentation/javascript/reference#DrawingManager 使用它而不是 google.maps.Rectangle(); 看一下这个：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script type="text/javascript">    
function initialize() {

// render map
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng( 36.175, -115.1363889 ),
   mapTypeControl: false,
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
});
    // get the DrawingManager - Remember to include &libraries=drawing in the API call
     var draw = new google.maps.drawing.DrawingManager({
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT,
        drawingModes: [
          google.maps.drawing.OverlayType.CIRCLE,
          google.maps.drawing.OverlayType.RECTANGLE,
          google.maps.drawing.OverlayType.POLYGON
        ]
      },
      rectangleOptions: {
        fillColor: '#990000',
        fillOpacity: .4,
        strokeWeight: 3,
        strokeColor: '#999',
        clickable: true,
        editable: true,
        zIndex: 1
      }
      });
    // set the cursor to the rectangle
    draw.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);

    // adds a listener for completed overlays, most work done in here
    google.maps.event.addListener(draw, 'overlaycomplete', function(event) {

        draw.setDrawingMode(null); // put the cursor back to the hand

        if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
          //do something
        }
        if (event.type == google.maps.drawing.OverlayType.POLYGON) {
          // do something
        }

        if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {

          // on click, unset the overlay, and switch the cursor back to rectangle

          google.maps.event.addListener(event.overlay, 'click', function() {
            this.setMap(null);
            draw.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
          });

        }
  });

    // end of initialize
  draw.setMap(map);        
}  
google.maps.event.addDomListener(window, 'load', initialize);
于 2012-06-02T05:31:12.330 回答