jquery - 将类从 Mootools 转换为 jQuery 或经典 javascript

Question

以下 Mootools 类可帮助开发人员使用 Google Maps API v3 在 Google Map 上绘制圆形叠加层。我在我的项目中使用 jQuery，并了解面向对象 javascript 的入门级知识。

在 Google Maps API v2 中，这非常简单，但 API v3 目前还没有在 map 上绘制圆圈的内置方法。另外，在API文档中，有some description为此可以通过不同的方式来完成。

我想在我的项目中使用 jQuery 或经典 Javascript 来使用以下 CircleOverlay 方法。

任何人都可以帮助将以下 Mootools 行转换为支持 jQuery 的或经典的 javascript 方法吗？

var CircleOverlay = new Class({
 Implements: [Options],
 options: {
  numPoints: 100,
  drawOptions: {
   strokeColor: "#FF0000",
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: "#FF0000",
   fillOpacity: 0.35
  }
 },

 initialize: function(map, center, radius, options) {
  this.setOptions(options);

  google.maps.OverlayView.call(this);      
  var q = 180 / 63781370 / Math.sin(90 - center.lat()) / Math.PI;

  this._map = map;
  this._point = center;
  this._radius = radius * q * 10; // convert meters to latlang degrees

  // Fit bounds of a circle that is drawn into the map
  var d2r = Math.PI / 180;
  this.circleLatLngs = new Array();
  var circleLat = this._radius;
  var circleLng = circleLat / Math.cos(center.lat() * d2r);

  this.latlngbounds = new google.maps.LatLngBounds();

  // 2PI = 360 degrees, +1 so that the end points meet
  for (var i = 0; i < this.options.numPoints + 1; i++) {
   var theta = Math.PI * (i / (this.options.numPoints / 2));
   var vertexLat = center.lat() + (circleLat * Math.sin(theta));
   var vertexLng = parseFloat(center.lng()) + parseFloat((circleLng * Math.cos(theta)));
   var vertextLatLng = new google.maps.LatLng(vertexLat, vertexLng);
   this.circleLatLngs.push(vertextLatLng);
   this.latlngbounds.extend(vertextLatLng);
  }
  map.fitBounds(this.latlngbounds);
  this.setMap(map);
 },

 onAdd: function() {
  var polyOptions = this.options.drawOptions;
  polyOptions.paths = this.circleLatLngs;
  this.polygon = new google.maps.Polygon(polyOptions);
  this.polygon.setMap(this.map);
 },

 onRemove: function() {
  this.polygon.setMap(null);
 },

 draw: function() {
  this.onRemove();
  this.onAdd();
 }
});
CircleOverlay.implement(new google.maps.OverlayView());

Answer 1

上周末我刚刚做了类似的事情。

还没有测试过，但是...

var CircleOverlay = function(map, center, radius, options) {
    this.options = {
        // all options here, 
        // including an custom check to override the options, e.g.:
        numPoints: options.numPoints || 100,
        // etc...
    };

    // everything from initialize here;

    this.onAdd: function() { 
       var polyOptions = this.options.drawOptions;
       polyOptions.paths = this.circleLatLngs;
       this.polygon = new google.maps.Polygon(polyOptions);
       this.polygon.setMap(this.map);
    };

    this.onRemove: function() {
        this.polygon.setMap(null);
    };
    this.draw: function() {
        this.onRemove();
        this.onAdd();
    };
};