以下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());
您的快速回答非常感謝,但仍沒有解決。我添加了像你這樣的選項,比我在「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