另一种方法是使用 google.maps.geometry 库，注意 google maps 脚本 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/
