我设法在地图上放了一个圆圈并使其可编辑：
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 1 mile
editable: true,
fillOpacity: 0.25
});
circle.bindTo('center', marker, 'position');
但是，这使得半径和中心都可编辑。我只希望半径是可编辑的。我看不到通过google.maps.Circle.
我所追求的，几乎就是这里的东西：
http://www.freemaptools.com/radius-around-point.htm
但是我看不到它是如何完成的，因为他们的代码看起来很模糊。
您可以尝试监听 center_changed 事件并在它触发时重新定位中心，例如：
全局变量：
var centerPoint = new G.LatLng(45.5, -100.5);
var ignore = false;
var poly;
//position the map where the circle is so we can see it.
map.setCenter(centerPoint);
map.setZoom(11);
接着：
poly = new google.maps.Circle({
map: map,
center:centerPoint,
radius: 1609.344, // 1 mile
editable: true,
fillOpacity: 0.25
});
G.event.addListener(poly,'center_changed',function(){
if (ignore){
ignore = false;
return;
}
poly.setEditable(false);
ignore = true;
poly.setCenter(centerPoint);
poly.setEditable(true);
});
唯一的问题是中心标记可能会误导用户。
请参阅文档中的这篇文章（在可编辑对象之前）。如果您执行第 6 步并且不使中心标记可拖动，我认为这就是您想要的。
代码片段：
/**
* A distance widget that will display a circle that can be resized and will
* provide the radius in km.
*
* @param {google.maps.Map} map The map to attach to.
*
* @constructor
*/
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
// draggable: true, // <-- change to make so position doesn't move
title: 'Move me!'
});
// Bind the marker map property to the DistanceWidget map property
marker.bindTo('map', this);
// Bind the marker position property to the DistanceWidget position
// property
marker.bindTo('position', this);
// Create a new radius widget
var radiusWidget = new RadiusWidget();
// Bind the radiusWidget map to the DistanceWidget map
radiusWidget.bindTo('map', this);
// Bind the radiusWidget center to the DistanceWidget position
radiusWidget.bindTo('center', this, 'position');
// Bind to the radiusWidgets' distance property
this.bindTo('distance', radiusWidget);
// Bind to the radiusWidgets' bounds property
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/**
* A radius widget that add a circle to a map and centers on a marker.
*
* @constructor
*/
function RadiusWidget() {
var circle = new google.maps.Circle({
strokeWeight: 2
});
// Set the distance property value, default to 10km.
this.set('distance', 10);
// Bind the RadiusWidget bounds property to the circle bounds property.
this.bindTo('bounds', circle);
// Bind the circle center to the RadiusWidget center property
circle.bindTo('center', this);
// Bind the circle map to the RadiusWidget map
circle.bindTo('map', this);
// Bind the circle radius property to the RadiusWidget radius property
circle.bindTo('radius', this);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
/**
* Update the radius when the distance has changed.
*/
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
/**
* Add the sizer marker to the map.
*
* @private
*/
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: true,
title: 'Drag me!'
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
// As the sizer is being dragged, its position changes. Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var min = 0.5;
var max = 15;
var pos = me.get('sizer_position');
var center = me.get('center');
var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos) / 1000;
if (distance < min) {
me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, min * 1000, google.maps.geometry.spherical.computeHeading(center, pos)));
} else if (distance > max) {
me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, max * 1000, google.maps.geometry.spherical.computeHeading(center, pos)));
}
// Set the circle distance (radius)
me.setDistance();
});
};
/**
* Update the center of the circle and position the sizer back on the line.
*
* Position is bound to the DistanceWidget so this is expected to change when
* the position of the distance widget is changed.
*/
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
// Bounds might not always be set so check that it exists first.
if (bounds) {
var lng = bounds.getNorthEast().lng();
// Put the sizer at center, right on the circle.
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
/**
* Set the distance of the circle based on the position of the sizer.
*/
RadiusWidget.prototype.setDistance = function() {
// As the sizer is being dragged, its position changes. Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos) / 1000;
// Set the distance property for any objects that are bound to it
this.set('distance', distance);
};
function init() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.790234970864, -122.39031314844),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var distanceWidget = new DistanceWidget(map);
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
});
}
function displayInfo(widget) {
var info = document.getElementById('info');
info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
widget.get('distance');
}
google.maps.event.addDomListener(window, 'load', init);#map-canvas {
height: 500px;
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="info"></div>
<div id="map-canvas"></div>