在 google 地图 v3 中绘制可拖动形状

Question

var drawingManager;
var lastShape;
var map;

function initialize() {
 map = new google.maps.Map(document.getElementById('gmap'), {
  zoom: 3,
  center: new google.maps.LatLng(-25.165, 133.769),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  zoomControl: true
 });

 var shapeOptions = {
  strokeWeight: 1,
  strokeOpacity: 1,
  fillOpacity: 0.2,
  editable: true,
  draggable: true,
  clickable: false,
  strokeColor: '#3399FF',
  fillColor: '#3399FF'
 };
 // create marker
 var m1 = new google.maps.Marker({
  position: new google.maps.LatLng(-25.165, 133.769),
  map: map,
  title: 'Hello Australia!'
 });
 // create a drawing manager attached to the map to allow the user to draw
 // markers, lines, and shapes.
 drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: null,
  drawingControlOptions: {
   drawingModes: [google.maps.drawing.OverlayType.CIRCLE,    google.maps.drawing.OverlayType.RECTANGLE]
  },
  rectangleOptions: shapeOptions,
  circleOptions: shapeOptions,
  Options: shapeOptions,
  map: map
 });
 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
  if (lastShape != undefined) {
   lastShape.setMap(null);
  }
  // cancel drawing mode
  if (shift_draw == false) {
   drawingManager.setDrawingMode(null);
  }
  lastShape = e.overlay;
  lastShape.type = e.type;   

  lastBounds = lastShape.getBounds();
  $('#bounds').html(lastBounds.toString());
  // determine if marker1 is inside bounds:
  if (lastBounds.contains(m1.getPosition())) {
   $('#inside').html('Si!');
  } else {
   $('#inside').html('No...');
  }
  
 });
 var shift_draw = false;
 $(document).bind('keydown', function (e) {
  if (e.keyCode == 16 && shift_draw == false) {
   map.setOptions({
    draggable: false,
    disableDoubleClickZoom: true
   });
   shift_draw = true; // enable drawing
   drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
  }
 });
 $(document).bind('keyup', function (e) {
  if (e.keyCode == 16) {
   map.setOptions({
    draggable: true,
    disableDoubleClickZoom: true
   });
   shift_draw = false // disable drawing
   drawingManager.setDrawingMode(null);
  }
 });
 
 
 
}
google.maps.event.addDomListener(window, 'load', initialize);

body {
 background: #f5f5f5 url('../images/bg.jpg') no-repeat left top;
}
.google-maps {
 position: relative;
 height: 0;
 padding-bottom: 25%;
}

#gmap {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

<div class="google-maps"><div id="gmap"></div></div>
  

<div id="panel">
 <p>Presiona shift par dibujar un rectángulo, o selecciona la opción desde el menú de controles superior
  <br/></p> 
 <b>Está el marker en el area?:</b>
 <p id="inside">...</p> 
 <b>Coordenadas:</b>
 <p id="bounds">...</p>
</div>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

我正在使用此代码：

map = new google.maps.Map(document.getElementById('gmap'), {
                    zoom: 3,
                    center: new google.maps.LatLng(-25.165, 133.769),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true,
                    zoomControl: true
                });

                var shapeOptions = {
                    strokeWeight: 1,
                    strokeOpacity: 1,
                    fillOpacity: 0.2,
                    editable: true,
                    draggable: true, /* It doesn't seem to work */
                    clickable: false,
                    strokeColor: '#3399FF',
                    fillColor: '#3399FF'
                };
                // create marker
                var m1 = new google.maps.Marker({
                    position: new google.maps.LatLng(-25.165, 133.769),
                    map: map,
                    title: 'Hello Australia!'
                });
                // create a drawing manager attached to the map to allow the user to draw
                // markers, lines, and shapes.
                drawingManager = new google.maps.drawing.DrawingManager({
                    drawingMode: null,
                    drawingControlOptions: {
                        drawingModes: [google.maps.drawing.OverlayType.CIRCLE,          google.maps.drawing.OverlayType.RECTANGLE]
                    },
                    rectangleOptions: shapeOptions,
                    circleOptions: shapeOptions,
                    Options: shapeOptions,
                    map: map
                });

让用户绘制矩形或圆形，

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
                if (lastShape != undefined) {
                    lastShape.setMap(null);
                }
                // cancel drawing mode
                if (shift_draw == false) {
                    drawingManager.setDrawingMode(null);
                }
                lastShape = e.overlay;
                lastShape.type = e.type;
});

这似乎有效，除了 draggable: true 因为，一旦我拖动形状，它就会消失。

知道为什么吗？

Answer 1

此代码在您单击时隐藏形状：

google.maps.event.addListener(map, 'mousedown', function () {
   if (lastShape != undefined) {
      lastShape.setMap(null);
      $('#inside').html('...');
      $('#bounds').html('...');
   }
});

Answer 2

如果您将 "clickable" 设置为 true，您将能够拖动形状：

    var shapeOptions = {
        strokeWeight: 1,
        strokeOpacity: 1,
        fillOpacity: 0.2,
        editable: true,
        draggable: true,
        clickable: true,
        strokeColor: '#3399FF',
        fillColor: '#3399FF'
    };

在 google 地图 v3 中绘制可拖动形状

Draw Draggable shapes in google maps v3

javascript

google-maps

shape

draggable

google-maps-api-3