要在google maps api polygon中填充多个色彩

Question

我有使用google maps api绘制多边形的问题。看起来有很多fillColor。以下多边形的中心不应该有fillColor。

是google maps API还是我有错误？

示例：http://jsfiddle.net/zCA2u/

$(function(){
var shape;

var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var coords = [
    new google.maps.LatLng(31.50362, -70.0488),
    new google.maps.LatLng(29.91685, -62.4023),
    new google.maps.LatLng(22.91792, -56.42578),
    new google.maps.LatLng(22.67484, -69.6972),
    new google.maps.LatLng(27.29368, -74.8828),
    new google.maps.LatLng(33.06392, -73.3007),
    new google.maps.LatLng(34.23451, -66.0058),
    new google.maps.LatLng(32.32427, -58.2714),
    new google.maps.LatLng(26.35249, -56.4257),
    new google.maps.LatLng(18.81271, -60.64453),
    new google.maps.LatLng(20.13847, -69.4335)
];

shape = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#ff0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    draggable: true,
    fillColor: '#ff0000',
    fillOpacity: 0.35
});

shape.setMap(map);

}）;

我现在在IE8中尝试了上述内容，它在IE8中呈现正确

Answer 1

如果你想在多边形中制作“洞”

1. 图纸管理员不直接支持
2. 您需要具有单独的路径（多边形“paths”属性采用数组）
3. 内部路径（“孔”）需要沿与内部路径相反的方向缠绕

simple example of a polygon with a hole (a donut)

fiddle with self intersection removed and hole

var coords = [
 [  new google.maps.LatLng(27.29368, -74.8828),
    new google.maps.LatLng(33.06392, -73.3007),
    new google.maps.LatLng(34.23451, -66.0058),
    new google.maps.LatLng(32.32427, -58.2714),
    new google.maps.LatLng(26.35249, -56.4257),
    new google.maps.LatLng(18.81271, -60.64453),
    new google.maps.LatLng(20.13847, -69.4335)
],
    [
    new google.maps.LatLng(21.534847,-63.28125),
    new google.maps.LatLng(30.221102,-59.677734), 
    new google.maps.LatLng(30.600094,-71.279297)
    ]
];