將類從Mootools轉換爲jQuery或經典javascript

以下Mootools類可幫助開發人員使用Google Maps API v3在Google地圖上繪製圓形覆蓋圖。我在我的項目中使用jQuery，在面向對象的JavaScript中使用入門級知識。將類從Mootools轉換爲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());

來源

2010-01-21 edigu

我剛剛做了類似上週末的事情。

沒有測試過，但是......

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

來源

2010-01-21 08:59:09 jerone

您的快速回答非常感謝，但仍沒有解決。我添加了像你這樣的選項，比我在「this.onAdd：...」之前添加了所有初始化塊，並且將「：」符號替換爲「=」（eq this.onAdd：function（）this.onAdd = function （）..）。現在我收到一個錯誤：「this.setMap（）不是函數」 – edigu 2010-01-21 11:06:12

這是因爲：'CircleOverlay.implement（new google.maps.OverlayView（））;' - 你的類實現了另一個類，繼承它的方法。你需要轉換兩個... – 2010-01-21 12:43:20

Dimitar Christoff是正確的。「google.maps.OverlayView」的功能也需要包含。 – jerone 2010-01-21 12:51:48

解決了！謝謝Dimitar & 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;

來源

2010-01-21 14:46:19 edigu

將類從Mootools轉換爲jQuery或經典javascript

回答

相關問題