Преобразование класса из Mootools в jQuery или классический JavaScript

Question

Следующий класс Mootools помогает разработчику нарисовать наложение круга на Google Map с помощью Google Maps API v3. Я использую jQuery в своих проектах и ​​знания начального уровня в объектно-ориентированном javascript.

В Google Maps API v2 это очень просто, но в API v3 в настоящее время нет встроенных методов для рисования кругов на карте. Кроме того, в документации API есть некоторое описание , для этого можно сделать другим способом.

Я хочу использовать следующий метод CircleOverlay в моем проекте с jQuery или классическим Javascript.

Может ли кто-нибудь помочь преобразовать следующие строки 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();
    };
};

Answer 2

РЕШИТЬ! Спасибо, Димитар и Джерон.

Возможно, это поможет кому-нибудь в будущем. Окончательный рабочий код выглядит так:

var CircleOverlay = function(map, center, radius, options) {
    this.options = {
            numPoints: 50,
            drawOptions: {
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35
            }
        };
    // Extending with jQuery. So another ways possible
    this.options = $.extend(this.options, 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);

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

Наконец

CircleOverlay.prototype = google.maps.OverlayView.prototype;