用Google Map 画圆形

    本来该功能是该网站的功能之一: 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>