本来该功能是该网站的功能之一: http://www.3rdcrust.com/search/searchmap.html
大家可以通过查看网站源码,看见相关代码.
我只是把画圆这个功能单独提取了出来,方便大家使用.
<script type="text/javascript">
var map;
function createCircle(point, radius) {
geoQuery = new GeoQuery();
geoQuery.initializeCircle(radius, point, map);
geoQuery.render();
}
function destination(orig, hdng, dist) {
var R = 6371; // earth's mean radius in km
var oX, oY;
var x, y;
var d = dist/R; // d = angular distance covered on earth's surface
hdng = hdng * Math.PI / 180; // degrees to radians
oX = orig.x * Math.PI / 180;
oY = orig.y * Math.PI / 180;
y = Math.asin( Math.sin(oY)*Math.cos(d) + Math.cos(oY)*Math.sin(d)*Math.cos(hdng) );
x = oX + Math.atan2(Math.sin(hdng)*Math.sin(d)*Math.cos(oY), Math.cos(d)-Math.sin(oY)*Math.sin(y));
y = y * 180 / Math.PI;
x = x * 180 / Math.PI;
return new GLatLng(y, x);
}
function GeoQuery() {
}
GeoQuery.prototype.CIRCLE='circle';
GeoQuery.prototype.COLORS=["#ff0000"];
var COLORI=0;
GeoQuery.prototype = new GeoQuery();
GeoQuery.prototype._map;
GeoQuery.prototype._type;
GeoQuery.prototype._radius;
GeoQuery.prototype._polyline;
GeoQuery.prototype._color ;
GeoQuery.prototype._points;
GeoQuery.prototype._centerHandlePosition;
GeoQuery.prototype.initializeCircle = function(radius, point, map) {
this._type = this.CIRCLE;
this._radius = radius;
this._map = map;
this._centerHandlePosition = point;
this._color = this.COLORS[COLORI++ % 3];
}
GeoQuery.prototype.render = function() {
if (this._type == this.CIRCLE) {
this._points = [];
var distance = this._radius/1000;
for (i = 0; i < 72; i++) {
this._points.push(destination(this._centerHandlePosition, i * 360/72, distance) );
}
this._points.push(destination(this._centerHandlePosition, 0, distance) );
//this._polyline = new GPolyline(this._points, this._color, 6);
this._polyline = new GPolygon(this._points, this._color, 1, 1, this._color, 0.2);
this._map.addOverlay(this._polyline)
}
}
function load() {
if(GBrowserIsCompatible()){
map = new GMap2(document.getElementById("map"),{mapTypes:[G_SATELLITE_MAP]});
var point = new GLatLng("30","120");
map.setCenter(point, 4);
map.addControl(new GLargeMapControl());
map.enableDragging();
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
createCircle(new GLatLng("30", "120"), 650000);
}
}
</script>