Google地图v3设置一个可编辑半径但不居中的圆 [英] Google Maps v3 setting a circle with editable radius but not center

问题描述

我设法在地图上放置了一个圆圈并使其可编辑：

  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 获得该级别控制的方法。

之后，几乎是这里：

http://www.freemaptools.com/radius-around-point.htm

然而，我不明白它是如何完成的因为他们的代码看起来被混淆了。

解决方案

请参阅本文（在可编辑对象之前）。如果您采用第6步，并且不要使中心标记可拖动，我想这是你想要的。

小提琴包含链接中的原始代码

代码段：

  / ** *一个距离小部件，它将显示一个可以调整大小的圆，并以*为单位提供半径。 * * @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设置一个可编辑半径但不居中的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！