如何使用 Google Maps API V3 清除矩形

发布于 2024-11-19 17:55:30 字数 2651 浏览 2 评论 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>

原文

I am trying to get the following behaviour. When I click the map I want a rectangle to start appearing. As a move the mouse (not drag) I want the rectangle to adjust itself to fit the first click and the mouse position.

When I click the mouse the second time, I want to capture the corner coordinates (for a spatial search query) and then have the rectangle stop resizing.

On the third mouse click I want the rectangle to disappear.

At the moment the rectangle appears and resizes but it never stops following the mouse.

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌路终见情 2024-11-26 17:55:30

我刚刚遇到了同样的问题，我刚刚注意到这篇文章有多旧了。每个遇到此问题的人都需要查看 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);

I've just ran into the same problem and I just noticed how old this post is. Everyone that has this problem, you need to check out https://developers.google.com/maps/documentation/javascript/reference#DrawingManager
use that instead of google.maps.Rectangle(); Check This Out:

<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);

回复收藏 0 原文

~没有更多了~