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

Question

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

Kin*_*Kin 2 javascript geometry google-maps google-maps-api-3

有没有办法将谷歌地图中的圆圈分成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
});

Run Code Online (Sandbox Code Playgroud)

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

它应该是这样的: 在此输入图像描述

Answer 1

ast*_*ame 5

另一种方法是使用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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，11 月前
查看次数：	3526 次
最近记录：	9 年，10 月前