Google地图：适用于v3的动态可移动和可调整大小的圆形叠加脚本

Question

好的，我刚刚找到了我正在寻找的完美剧本。

http://web3o.blogspot.com.br/2010/05/google-maps-dynamically-movable-and.html

您可以在Google地图上添加带有纬度/长度和半径的圆圈。 问题是这个脚本只对v2 api

我也找到了这个 http://www.mapdevelopers.com/draw-circle-tool.php

但是没有可用的代码或来源：（

有人知道这些可以在v3上运行的脚本吗？

谢谢

Answer 1

该功能内置于Google Maps API v3 Drawing Library

Example

您可以将其自定义为仅允许圆圈（或只允许一个圆圈）。

Working example

代码段

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE
      ]
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    // Switch back to non-drawing mode after drawing a shape.
    drawingManager.setDrawingMode(null);
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas,
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map-canvas,
  #map_canvas {
    height: 650px;
  }
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map-canvas"></div>

Answer 2

＆＃13;

＆＃13;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE
      ]
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    // Switch back to non-drawing mode after drawing a shape.
    drawingManager.setDrawingMode(null);
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body {
  height: 100%;

  margin: 0;
  padding: 0;
}
#map-canvas,
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map-canvas,
  #map_canvas {
    height: 650px;
  }
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;