我设法在地图上放置了一个圆圈并使其可编辑：
var circle = new google.maps。 Circle（{
map：map，
radius：1609.344，// 1英里
editable：true，
fillOpacity：0.25
}）;
circle.bindTo（'center'，marker，'position'）;
但是，这使得半径和中心都可编辑。我只希望半径是可编辑的。我看不到通过 google.maps.Circle 获得该级别控制的方法。
之后，几乎是这里：
然而，我不明白它是如何完成的因为他们的代码看起来被混淆了。
解决方案请参阅（在可编辑对象之前）。如果您采用，并且不要使中心标记可拖动，我想这是你想要的。
代码段：
/ ** *一个距离小部件，它将显示一个可以调整大小的圆，并以*为单位提供半径。 * * @param {google.maps.Map}地图要附加到的地图。 * * @constructor * / function DistanceWidget（map）{this.set（'map'，map）; this.set（'position'，map.getCenter（））; var marker = new google.maps.Marker（{// draggable：true，//< - 改变位置不移动标题：'Move me！'}）; //将标记贴图属性绑定到DistanceWidget贴图属性marker.bindTo（'map'，this）; //将标记位置属性绑定到DistanceWidget位置// property marker.bindTo（'position'，this）; //创建一个新的半径小部件var radiusWidget = new RadiusWidget（）; //将radiusWidget地图绑定到DistanceWidget地图radiusWidget.bindTo（'map'，this）; //将radiusWidget中心绑定到DistanceWidget位置radiusWidget.bindTo（'center'，this，'position'）; //绑定到radiusWidgets的distance属性this.bindTo（'distance'，radiusWidget）; //绑定到radiusWidgets的边界属性this.bindTo（'bounds'，radiusWidget）;} DistanceWidget.prototype = new google.maps.MVCObject（）; / ** *向地图和中心添加圆的半径小部件在一个标记上。 * * @constructor * / function RadiusWidget（）{var circle = new google.maps.Circle（{strokeWeight：2}）; //设置距离属性值，默认为10km。 this.set（'distance'，10）; //将RadiusWidget bounds属性绑定到circle bounds属性。 this.bindTo（'bounds'，circle）; //将圆心绑定到RadiusWidget中心属性circle.bindTo（'center'，this）; //将圆地图绑定到RadiusWidget地图circle.bindTo（'map'，this）; //将圆半径属性绑定到RadiusWidget的半径属性circle.bindTo（'radius'，this）; //添加sizer标记this.addSizer _（）;} RadiusWidget.prototype = new google.maps.MVCObject（）; / ** *当距离发生变化时更新半径。 * / RadiusWidget.prototype.distance_changed = function（）{this.set（'radius'，this.get（'distance'）* 1000）;}; / ** *将sizer标记添加到地图。 * * @private * / RadiusWidget.prototype.addSizer_ = function（）{var sizer = new google.maps.Marker（{dragggable：true，title：'Drag me！'}）; sizer.bindTo（'map'，this）; sizer.bindTo（'position'，this，'sizer_position'）; var me = this; google.maps.event.addListener（sizer，'drag'，function（）{//当sizer被拖动时，它的位置发生变化，因为// RadiusWidget的sizer_position被绑定到sizer的位置，它会改为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 （center，min * 1000，google.maps.geometry.spherical.computeHeading（center，如果（距离>最大）{me.set（'sizer_position'，google.maps.geometry.spherical.computeOffset（center，max * 1000，google.maps.geometry.spherical.computeHeading（center ，pos）））;} //设置圆距（半径）me.setDistance（）;}）;}; / ** *更新圆的中心并将sizer放回原位。 * *位置与DistanceWidget绑定，因此当*距离小部件的位置发生更改时，预计会更改此位置。 * / RadiusWidget.prototype.center_changed = function（）{var bounds = this.get（'bounds'）; //边界可能并不总是如此，因此请检查它是否存在。 if（bounds）{var lng = bounds.getNorthEast（）。lng（）; //将sizer放置在圆心的正中。 var position = new google.maps.LatLng（this.get（'center'）。lat（），lng）; this.set（'sizer_position'，position）; }}; / ** *根据sizer的位置设置圆的距离。 * / RadiusWidget.prototype.setDistance = function（）{//当sizer被拖动时，其位置发生变化。因为// RadiusWidget的sizer_position绑定到sizer的位置，它也会改变。 var pos = this.get（'sizer_position'）; var center = this.get（'center'）; var distance = google.maps.geometry.spherical.computeDistanceBetween（center，pos）/ 1000; //设置绑定到它的任何对象的distance属性this.set（'distance'，distance）;};函数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>
I have managed to put a circle on a map and make it editable:
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 1 mile
editable: true,
fillOpacity: 0.25
});
circle.bindTo('center', marker, 'position');
However, this makes both the radius, and center editable. I only want the radius to be editable. I can't see a way to have that level of control via google.maps.Circle.
What I am after, is pretty much what is here:
http://www.freemaptools.com/radius-around-point.htm
However I can't see how it is done as their code looks obfuscated.
See this article from the documentation (before editable objects). If you take the step 6 and don't make the center marker draggable, I think it is what you want.
fiddle containing original code from link
code snippet:
/**
* 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>
original article (link now dead)
这篇关于Google地图v3设置一个可编辑半径但不居中的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！