在多邊形中繪製多個洞 - 谷歌地圖api

Question

我使用與此示例相同的方法http://www.geocodezip.com/v3_polygon_example_donut.html在多邊形中繪製我的初始整體。我現在要繪製多個整體而在相同的多邊形後的首次全，所以我想我可能只是這樣做：

var p = new google.maps.Polygon({ 
     paths: [drawCircle(getPosition(), 100, 1), 
     drawCircle(getPosition(), .02, -1), 
     drawCircle(new google.maps.LatLng((45.345573,-71.09909500000003), 
     10, -1))], 
     strokeColor: "#040102", 
     map: map 
    }); 

但是，這並不工作。數組中的前2個路徑將被繪製（它看起來與圓環示例完全相同），但它不會渲染最後一個路徑。任何想法爲什麼？

謝謝！

Answer 1

你在你的代碼一個錯字（一組額外的括號）

var p = new google.maps.Polygon({ 
     paths: [drawCircle(getPosition(), 100, 1), 
     drawCircle(getPosition(), .02, -1), 
     drawCircle(new google.maps.LatLng(45.345573,-71.09909500000003), 
     10, -1)], 
     strokeColor: "#040102", 
     map: map 
    }); 

代碼片段：

var map = null; 
 
var bounds = null; 
 

 
function initialize() { 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(-33.9, 151.2), 
 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
    }, 
 
    navigationControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    bounds = new google.maps.LatLngBounds(); 
 

 
    var p = new google.maps.Polygon({ 
 
    paths: [ 
 
     drawCircle(getPosition(), 100, 1), 
 
     drawCircle(new google.maps.LatLng(45.4009928, -71.8824288), 10, -1), 
 
     drawCircle(new google.maps.LatLng(45.345573, -71.099095), 10, -1) 
 
    ], 
 
    strokeColor: "#040102", 
 
    map: map 
 
    }); 
 

 
    map.fitBounds(bounds); 
 

 
} 
 

 
function getPosition() { 
 
    return new google.maps.LatLng(45.345573, -71.099095); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function drawCircle(point, radius, dir) { 
 
    var d2r = Math.PI/180; // degrees to radians 
 
    var r2d = 180/Math.PI; // radians to degrees 
 
    var earthsradius = 3963; // 3963 is the radius of the earth in miles 
 

 
    var points = 32; 
 

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

 

 
    var extp = new Array(); 
 
    if (dir == 1) { 
 
    var start = 0; 
 
    var end = points + 1 
 
    } // one extra here makes sure we connect the 
 
    else { 
 
    var start = points + 1; 
 
    var end = 0 
 
    } 
 
    for (var i = start; 
 
    (dir == 1 ? i < end : i > end); i = i + dir) { 
 
    var theta = Math.PI * (i/(points/2)); 
 
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
 
    extp.push(new google.maps.LatLng(ex, ey)); 
 
    bounds.extend(extp[extp.length - 1]); 
 
    } 
 
    return extp; 
 
}

body, 
 
html, 
 
#map_canvas { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>