0

次の動作を取得しようとしています。地図をクリックすると、長方形が表示され始めます。マウスを動かす（ドラッグしない）ので、最初のクリックとマウスの位置に合わせて長方形を調整します。

マウスを 2 回目にクリックしたときに、角の座標を (空間検索クエリ用に) キャプチャしてから、四角形のサイズ変更を停止したいと考えています。

マウスの 3 回目のクリックで、四角形を非表示にします。

現時点では、長方形が表示されてサイズが変更されますが、マウスの追跡が停止することはありません。

<!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を確認する必要があり ます。これをチェックしてください：

<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 に答える