Question

我从这里拿了示例代码---＆gt; https://google-developers.appspot.com/maps/articles/mvcfun/step6

我添加了一些代码以获得最大和最小调整范围.. 我成功地使圆圈在这两个范围内停止，但调整大小标记不会停止，例如圆圈...

我唯一改变的是这个

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 = this.distanceBetweenPoints_(center, pos);

  // Set the distance property for any objects that are bound to it
  this.set('distance', distance);
};

到这个

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 min=0.5;
        var max=15;
        var pos = this.get('sizer_position');
        var center = this.get('center');
        var distance = this.distanceBetweenPoints_(center, pos);
        if (distance < min){ distance = min;}
         if (distance > max){distance = max;}





        // Set the distance property for any objects that are bound to it
        this.set('distance', distance);
      };

Answer 1

如果我在'drag'事件监听器中设置距离限制，那对我来说效果更好：

    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();
    });
  };

注意：我使用spherical geometry computeDistanceBetween method来计算距离），需要包含该库。

working example

调整google maps v3（MVC对象）中的圆圈

1 个答案: