以下 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());
最佳答案
上周末我刚刚做了类似的事情。
还没有测试过,但是...
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();
};
};
关于jquery - 将类从 Mootools 转换为 jQuery 或经典 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2107891/