Question

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

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

我想在我的项目中使用以下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

解决了！谢谢Dimitar＆amp; jerone。

这对未来的任何人都有帮助。最终的工作代码是这样的：

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;

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

2 个答案: