Question

有没有办法将谷歌地图中的圆圈拆分为120度？目前我用半径绘制一个简单的圆圈，它看起来像这样：

map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 16,
    center: new google.maps.LatLng(55.685025, 21.118995)
});

var lat_lng = new google.maps.LatLng(55.685025, 21.118995);

marker = new google.maps.Marker({
    position: lat_lng,
    map: map,
    icon: 'map_green.png'
});

circle = new google.maps.Circle({
    map: map,
    radius: 200,
    fillColor: 'green',
    center: lat_lng
});

然后我想我需要在圆圈顶部绘制三个多边形，但不知道如何计算位置......

它应该是这样的： enter image description here

Answer 1

另一种方法，使用google.maps.geometry库，请注意google地图脚本src中的'libraries = geometry'参数：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Some Title</title>
</head>
<body>
<div id="map_canvas" style="width:800px; height:600px; margin:0 auto;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
<script type="text/javascript">

function initialize() {
    var gm = google.maps,
        centerPt = new gm.LatLng(55.685025, 21.118995),
        map = new gm.Map(document.getElementById('map_canvas'), {
            mapTypeId: gm.MapTypeId.ROADMAP,
            zoom: 16,
            center: centerPt
        }),
        marker = new gm.Marker({
            position: centerPt,
            map: map,
             //Colors available (marker.png is red):
             //black, brown, green, grey, orange, purple, white & yellow
            icon: 'http://maps.google.com/mapfiles/marker_green.png'
        }),
        slices = [
             //startAngle, endAngle, color to fill polygon with
            [300, 60, 'red'],
            [60, 180, 'green'],
            [180, 300, 'blue']
        ],
        polys = [],
        i = 0,
        radiusMeters = 200;
    for (; i < slices.length; i++) {
        var path = getArcPath(centerPt, radiusMeters, slices[i][0], slices[i][1]);
         //Insert the center point of our circle as first item in path
        path.unshift(centerPt);
        //Add the center point of our circle as last item in path to create closed path.
        //Note google does not actually require us to close the path,
        //but doesn't hurt to do so
        path.push(centerPt);
        var poly = new gm.Polygon({
            path: path,
            map: map,
            fillColor:slices[i][2],
            fillOpacity:0.6
        });
        polys.push(poly);
    }
}

/***
* REQUIRES: google.maps.geometry library, via a 'libraries=geometry' parameter
*  on url to google maps script
* @param center must be a google.maps.LatLng object.
* @param radiusMeters must be a number, radius in meters.
* @param startAngle must be an integer from 0 to 360, angle at which to begin arc.
* @param endAngle must be an integer from 0 to 360, angle at which to end arc.
*   For a full circle, use startAngle of 0 and endAngle of 360
*   which will create a closed path.
* @param direction -optional- defaults to clockwise,
*   pass string 'counterclockwise' to reverse direction.
* @Returns array of google.maps.LatLng objects.
***/
function getArcPath(center, radiusMeters, startAngle, endAngle, direction){
    var point, previous,
        atEnd = false,
        points = Array(),
        a = startAngle;
    while (true) {
        point = google.maps.geometry.spherical.computeOffset(center, radiusMeters, a);
        points.push(point);
        if (a == endAngle){
            break;
        }
        a++;
        if (a > 360) {
            a = 1;
        }
    }
    if (direction == 'counterclockwise') {
        points = points.reverse();
    }
    return points;
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

此处可查看的示例：http://jsfiddle.net/rkC2S/

Answer 2

一种方法就是this example

function drawArc(center, initialBearing, finalBearing, radius) { 
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 

   var points = 32; 

   // find the raidus in lat/lon 
   var rlat = (radius / EarthRadiusMeters) * r2d; 
   var rlng = rlat / Math.cos(center.lat() * d2r); 

   var extp = new Array();

   if (initialBearing > finalBearing) finalBearing += 360;
   var deltaBearing = finalBearing - initialBearing;
   deltaBearing = deltaBearing/points;

   for (var i=0; (i < points+1); i++) 
   { 
      extp.push(center.DestinationPoint(initialBearing + i*deltaBearing, radius)); 
      bounds.extend(extp[extp.length-1]);
   } 
   return extp;
   }

  var arcPts = drawArc(centerPoint, centerPoint.Bearing(startPoint), centerPoint.Bearing(endPoint), centerPoint.distanceFrom(startPoint), -1.0);
  // add the start and end lines
  arcPts.push(centerPoint);
  bounds.extend(centerPoint);
  arcPts.push(startPoint);

  var piePoly = new google.maps.Polygon({
                 paths: [arcPts],
                 strokeColor: "#00FF00",
                 strokeOpacity: 0.5,
                 strokeWeight: 2,
                 fillColor: "#FF0000",
                 fillOpacity: 0.35,
                 map: map
     })

它是在geometry library可用之前，因此它以不同的方式提供了一些可用的功能，但可以更改。

example using the geometry library

// from http://en.wikipedia.org/wiki/Earth_radius
/*
/ Equatorial radius
/ The Earth's equatorial radius a, or semi-major axis, is the distance from its center to the equator and equals 6,378.1370 km (?3,963.191 mi; ?3,443.918 nmi).
*/
var EarthRadiusMeters = 6378137.0; // meters
/* Based the on the Latitude/longitude spherical geodesy formulae & scripts
   at http://www.movable-type.co.uk/scripts/latlong.html
   (c) Chris Veness 2002-2010
*/ 
google.maps.LatLng.prototype.DestinationPoint = function (brng, dist) {
var R = EarthRadiusMeters; // earth's mean radius in meters
var brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin( Math.sin(lat1)*Math.cos(dist/R) + 
                      Math.cos(lat1)*Math.sin(dist/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(dist/R)*Math.cos(lat1), 
                             Math.cos(dist/R)-Math.sin(lat1)*Math.sin(lat2));

return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}

// === A function which returns the bearing between two LatLng in radians ===
// === If v1 is null, it returns the bearing between the first and last vertex ===
// === If v1 is present but v2 is null, returns the bearing from v1 to the next vertex ===
// === If either vertex is out of range, returns void ===
google.maps.LatLng.prototype.Bearing = function(otherLatLng) {
  var from = this;
  var to = otherLatLng;
  if (from.equals(to)) {
    return 0;
  }
  var lat1 = from.latRadians();
  var lon1 = from.lngRadians();
  var lat2 = to.latRadians();
  var lon2 = to.lngRadians();
  var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
  if ( angle < 0.0 ) angle  += Math.PI * 2.0;
  if ( angle > Math.PI ) angle -= Math.PI * 2.0; 
  return parseFloat(angle.toDeg());
}


/**
 * Extend the Number object to convert degrees to radians
 *
 * @return {Number} Bearing in radians
 * @ignore
 */ 
Number.prototype.toRad = function () {
  return this * Math.PI / 180;
};

/**
 * Extend the Number object to convert radians to degrees
 *
 * @return {Number} Bearing in degrees
 * @ignore
 */ 
Number.prototype.toDeg = function () {
  return this * 180 / Math.PI;
};

/**
 * Normalize a heading in degrees to between 0 and +360
 *
 * @return {Number} Return 
 * @ignore
 */ 
Number.prototype.toBrng = function () {
  return (this.toDeg() + 360) % 360;
};

如何将圈子拆分为谷歌地图中的扇区？

2 个答案: