Quiero crear un Donut con Javascript API V3 (Espacio vacío dentro como un agujero)

Quiero crear un agujero en mi API de Google API V3, así que sigo el Inicio de Google Map API V3. Pero el código está representando toda el área. Aquí está mi código Javascript.

(function() { window.onload = function() { // Creating a map var options = { zoom: 6, center: new google.maps.LatLng(36.5, -79.8), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), options); // Creating an array with the points for the outer polygon var polyOuter = [ new google.maps.LatLng(37.303, -81.256), new google.maps.LatLng(37.303, -78.333), new google.maps.LatLng(35.392, -78.333), new google.maps.LatLng(35.392, -81.256) ]; // Creating an array with the points for the inner polygon var polyInner = [ new google.maps.LatLng(36.705, -80.459), new google.maps.LatLng(36.705, -79), new google.maps.LatLng(35.9, -79), new google.maps.LatLng(35.9, -80.459) ]; var points = [polyOuter, polyInner]; // Creating the polygon var polygon = new google.maps.Polygon ({ paths: points, map: map, strokeColor: '#ff0000', strokeOpacity: 0.6, strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.35 }); }; })(); 

Uno de los paths debe revertirse para que los polígonos se dibujen en diferentes direcciones, por ejemplo:

 var polyInner = [ new google.maps.LatLng(35.9, -80.459), new google.maps.LatLng(35.9, -79), new google.maps.LatLng(36.705, -79), new google.maps.LatLng(36.705, -80.459) ]; 

Mi suposition es que la razón es cómo SVG o canvas rinden loops cerrados. Si no estoy equivocado, la explicación radica en la regla de devanado distinta de cero . Ver explicación en wikipedia .

El path exterior se dibuja en el sentido de las agujas del reloj, el path interior se dibuja en el sentido contrario a las agujas del reloj.

Establezca un contador a cero. Elija un punto en el área de objects y dibuje una línea en dirección fuera del espacio de objects. Si la línea se cruza en el sentido de las agujas del reloj, agrega una. Si la línea cruza el segmento de ruta en el sentido contrario a las agujas del reloj, reste uno. Si el resultado final del punto seleccionado no es cero, el browser ocupará el área. Si el resultado final es cero, el browser no lo llena.

Entonces, si recoges un punto en el 'hoyo', el resultado será cero y el área no se llenará.