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

我正試圖獲得以下行爲。當我點擊地圖時，我想要一個矩形開始出現。作爲一個移動鼠標（不拖動），我想矩形調整自己，以適應第一次點擊和鼠標位置。如何使用Google Maps API V3清除矩形

當我第二次單擊鼠標時，我想要捕捉角座標（對於空間搜索查詢），然後讓矩形停止調整大小。

在第三次鼠標單擊時，我希望矩形消失。

目前矩形出現並調整大小，但它永遠不會停止跟隨鼠標。

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

來源

2011-07-14 Ankur

使用這個問題http://stackoverflow.com/questions/5090174/google-maps-api-v3-mousemove-and-click-event-combo我意識到我不得不改變矩形的屬性。所以我添加了'clickable：false'到var rectOptions。我想這會使矩形不可點擊，因此地圖會註冊點擊事件。 – Ankur

我剛剛遇到同樣的問題，我只注意到這篇文章有多大。每個人都有這個問題，你需要檢查出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-02 05:31:12

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

回答

相關問題