如何使用Google Maps Javascript API v3繪制某些復雜形狀

Question

我想繪制一個形狀，該形狀由具有一定直徑的圓和具有相同中心的矩形組成，但寬度較小且較長。

一個例子是此圖像右上角的灰色形狀： http : //nl.ivao.aero/extern/pictures/AIRSP004.jpg

現在，我顯然可以在彼此的頂部使用單獨的圓形和矩形，但這不會產生我想要的結果，因為重疊部分的內部重疊部分將具有雙重不透明度和/或難看的邊框。

是否有可能創建這樣的“復雜”形狀/多邊形？ 還是在沒有前述雙重不透明問題的情況下偽造它？

編輯：

這是我想出的代碼，完全基於Dr.Molle的回答。

結果的屏幕截圖： 格羅寧根機場Eelde CTR

var CTRs = [{
    name: 'Eelde CTR',
    segments: [{
        type: 'point',
        coords: {"lat":53.041097,"lng":6.271475}
    },{
        type: 'curve',
        start: {"lat":53.105131,"lng":6.406608},
        end: {"lat":53.223394,"lng":6.658117},
        center: {"lat":53.125000,"lng":6.583333},
        radius: 6.5
    },{
        type: 'point',
        coords: {"lat":53.286983,"lng":6.794394}
    },{
        type: 'point',
        coords: {"lat":53.208306,"lng":6.896883}
    },{
        type: 'curve',
        start: {"lat":53.144606,"lng":6.760219},
        end: {"lat":53.026556,"lng":6.508892},
        center: {"lat":53.125000,"lng":6.583333},
        radius: 6.5
    },{
        type: 'point',
        coords: {"lat":52.962414,"lng":6.373378}
    }]
}];

function drawCTRs()
{
    for ( var i = 0; i < CTRs.length; i++ )
    {
        drawAirspace(CTRs[i]);
    }
}

function circleSegment(start, end, center, radius, points)
{
    points = points || 180;
    var a = [];
    var startHeading    = ( google.maps.geometry.spherical.computeHeading(center, start) + 360 ) % 360;
    var endHeading      = ( google.maps.geometry.spherical.computeHeading(center, end) + 360 ) % 360;
    var heading         = startHeading;
        radius         *= 1852;

    var headingIncr     = Math.abs((((endHeading - startHeading) + 360) % 360) / points);

    for ( var i = 0; i < points; i++, heading += headingIncr )
    {
        heading = heading % 360;
        a.push(new google.maps.geometry.spherical.computeOffset(center, radius, heading));
    }

    return a;
}

function drawAirspace( airspace )
{
    var path = [];
    for ( var i = 0; i < airspace.segments.length; i++ )
    {
        if ( airspace.segments[i].type == 'point' )
        {
            path.push(new google.maps.LatLng(airspace.segments[i].coords.lat, airspace.segments[i].coords.lng));
        } else if ( airspace.segments[i].type == 'curve' )
        {
            path = path.concat(circleSegment(
                new google.maps.LatLng(airspace.segments[i].start.lat, airspace.segments[i].start.lng),
                new google.maps.LatLng(airspace.segments[i].end.lat, airspace.segments[i].end.lng),
                new google.maps.LatLng(airspace.segments[i].center.lat, airspace.segments[i].center.lng),
                airspace.segments[i].radius,
                100
            ));
        }
    }

    var airspaceOverlay = new google.maps.Polygon({
        paths: path,
        map: map,
        title: airspace.name,
        strokeColor: '#770000',
        strokeWeight: 2,
        fillColor: '#770000',
        fillOpacity: .2
    })
}

Answer 1

首先，您需要獲取圓的點，以便能夠創建看起來像圓的多邊形（請參閱： 如何在GoogleMaps中使用多邊形繪制圓 ）

基於此路徑，打破圓圈並添加自定義點並不難。 根據鏈接的答案修改功能：

function circlePath(center,radius,points){
   var a=[],p=360/points,d=0,pp;
   for(var i=0;i<points;++i,d+=p){
       pp=google.maps.geometry.spherical.computeOffset(center,radius,d);

    if(d%180==20){
     a.push(google.maps.geometry.spherical.computeOffset(pp,radius*.7,45+(d-(d%180))));
     i+=44;d+=(44*p);
    }
    else if(d%180==65){
     a.push(google.maps.geometry.spherical.computeOffset(pp,radius*.7,45+(d-(d%180))));  
    }
    else{
     a.push(pp);
    }

   }
   return a;
 }

演示： http : //jsfiddle.net/doktormolle/1nmcd2nv/