内环

内环

关注
发信
关注(28)粉丝(399)

javascript - 背景内环Google Maps(多边形中的孔)

我在Google Maps中带有内环的多边形有问题。我已经完成了一些测试和示例，但是无法正常工作。

这是一个正常工作的示例：

  var paths = [[
    new google.maps.LatLng(38.872886, -77.054720),
    new google.maps.LatLng(38.872602, -77.058046),
    new google.maps.LatLng(38.870080, -77.058604),
    new google.maps.LatLng(38.868894, -77.055664),
    new google.maps.LatLng(38.870598, -77.053346)
  ], [
    new google.maps.LatLng(38.871684, -77.056780),
    new google.maps.LatLng(38.871867, -77.055449),
    new google.maps.LatLng(38.870915, -77.054891),
    new google.maps.LatLng(38.870113, -77.055836),
    new google.maps.LatLng(38.870581, -77.057037)
  ]];


http://jsfiddle.net/5569fn01/1/

这是我的真实数据的示例：

var paths = [[
new google.maps.LatLng(40.432901, -3.693242),
new google.maps.LatLng(40.432896, -3.693366),
new google.maps.LatLng(40.432842, -3.694789),
new google.maps.LatLng(40.432833, -3.694912),
new google.maps.LatLng(40.432999, -3.6949),
new google.maps.LatLng(40.433829, -3.694829),
new google.maps.LatLng(40.433932, -3.694822),
new google.maps.LatLng(40.434022, -3.694816),
new google.maps.LatLng(40.434928, -3.69474),
new google.maps.LatLng(40.435077, -3.694725),
new google.maps.LatLng(40.435076, -3.69485),
new google.maps.LatLng(40.435035, -3.696426),
new google.maps.LatLng(40.435179, -3.696416),
new google.maps.LatLng(40.435567, -3.69639),
new google.maps.LatLng(40.435662, -3.696382),
new google.maps.LatLng(40.435658, -3.696257),
new google.maps.LatLng(40.435581, -3.694807),
new google.maps.LatLng(40.435573, -3.694681),
new google.maps.LatLng(40.436564, -3.694595),
new google.maps.LatLng(40.436663, -3.694583),
new google.maps.LatLng(40.436663, -3.69471),
new google.maps.LatLng(40.43669, -3.696191),
new google.maps.LatLng(40.436689, -3.696313),
new google.maps.LatLng(40.436779, -3.696306),
new google.maps.LatLng(40.436977, -3.696294),
new google.maps.LatLng(40.438149, -3.696219),
new google.maps.LatLng(40.438307, -3.696203),
new google.maps.LatLng(40.43831, -3.696327),
new google.maps.LatLng(40.43837, -3.697579),
new google.maps.LatLng(40.438374, -3.697701),
new google.maps.LatLng(40.438378, -3.697828),
new google.maps.LatLng(40.438406, -3.698438),
new google.maps.LatLng(40.438406, -3.698476),
new google.maps.LatLng(40.438414, -3.698542),
new google.maps.LatLng(40.438442, -3.699126),
new google.maps.LatLng(40.438446, -3.699248),
new google.maps.LatLng(40.438454, -3.699373),
new google.maps.LatLng(40.438479, -3.699828),
new google.maps.LatLng(40.438487, -3.699974),
new google.maps.LatLng(40.438494, -3.700201),
new google.maps.LatLng(40.438511, -3.700501),
new google.maps.LatLng(40.43853, -3.700995),
new google.maps.LatLng(40.438606, -3.702541),
new google.maps.LatLng(40.438657, -3.70377),
new google.maps.LatLng(40.438669, -3.704118),
new google.maps.LatLng(40.438685, -3.704454),
new google.maps.LatLng(40.438719, -3.705496),
new google.maps.LatLng(40.438738, -3.706029),
new google.maps.LatLng(40.438749, -3.70643),
new google.maps.LatLng(40.438764, -3.706876),
new google.maps.LatLng(40.438802, -3.708035),
new google.maps.LatLng(40.43881, -3.708214),
new google.maps.LatLng(40.438648, -3.708229),
new google.maps.LatLng(40.437531, -3.708311),
new google.maps.LatLng(40.437445, -3.708318),
new google.maps.LatLng(40.437449, -3.70846),
new google.maps.LatLng(40.437512, -3.709802),
new google.maps.LatLng(40.43752, -3.709965),
new google.maps.LatLng(40.437529, -3.710104),
new google.maps.LatLng(40.437572, -3.711025),
new google.maps.LatLng(40.437581, -3.71115),
new google.maps.LatLng(40.437482, -3.711158),
new google.maps.LatLng(40.436981, -3.7112),
new google.maps.LatLng(40.436981, -3.711189),
new google.maps.LatLng(40.436418, -3.711233),
new google.maps.LatLng(40.436323, -3.711242),
new google.maps.LatLng(40.436315, -3.711118),
new google.maps.LatLng(40.436271, -3.710183),
new google.maps.LatLng(40.436263, -3.710039),
new google.maps.LatLng(40.436255, -3.709882),
new google.maps.LatLng(40.436191, -3.708552),
new google.maps.LatLng(40.436183, -3.708409),
new google.maps.LatLng(40.436093, -3.708416),
new google.maps.LatLng(40.435205, -3.708492),
new google.maps.LatLng(40.43511, -3.708498),
new google.maps.LatLng(40.435114, -3.708649),
new google.maps.LatLng(40.435205, -3.709957),
new google.maps.LatLng(40.435213, -3.71011),
new google.maps.LatLng(40.435221, -3.710261),
new google.maps.LatLng(40.435256, -3.711201),
new google.maps.LatLng(40.43526, -3.71133),
new google.maps.LatLng(40.435165, -3.71134),
new google.maps.LatLng(40.434737, -3.711375),
new google.maps.LatLng(40.434656, -3.711381),
new google.maps.LatLng(40.434259, -3.711413),
new google.maps.LatLng(40.434156, -3.711417),
new google.maps.LatLng(40.434061, -3.711421),
new google.maps.LatLng(40.433061, -3.711503),
new google.maps.LatLng(40.43297, -3.711511),
new google.maps.LatLng(40.432867, -3.71152),
new google.maps.LatLng(40.432479, -3.711552),
new google.maps.LatLng(40.431835, -3.711604),
new google.maps.LatLng(40.431745, -3.711613),
new google.maps.LatLng(40.431654, -3.711621),
new google.maps.LatLng(40.431114, -3.711668),
new google.maps.LatLng(40.43037, -3.711735),
new google.maps.LatLng(40.430203, -3.711835),
new google.maps.LatLng(40.430186, -3.711648),
new google.maps.LatLng(40.430063, -3.710426),
new google.maps.LatLng(40.429927, -3.709089),
new google.maps.LatLng(40.429914, -3.708938),
new google.maps.LatLng(40.429905, -3.708896),
new google.maps.LatLng(40.429892, -3.708799),
new google.maps.LatLng(40.429843, -3.708805),
new google.maps.LatLng(40.428921, -3.70936),
new google.maps.LatLng(40.42883, -3.709443),
new google.maps.LatLng(40.42873, -3.70953),
new google.maps.LatLng(40.428568, -3.709635),
new google.maps.LatLng(40.428519, -3.709499),
new google.maps.LatLng(40.428316, -3.709481),
new google.maps.LatLng(40.428321, -3.709417),
new google.maps.LatLng(40.428325, -3.708782),
new google.maps.LatLng(40.428329, -3.708081),
new google.maps.LatLng(40.428335, -3.707872),
new google.maps.LatLng(40.428295, -3.707878),
new google.maps.LatLng(40.428006, -3.707928),
new google.maps.LatLng(40.427974, -3.707933),
new google.maps.LatLng(40.428005, -3.707338),
new google.maps.LatLng(40.427973, -3.707343),
new google.maps.LatLng(40.427964, -3.707345),
new google.maps.LatLng(40.427473, -3.707427),
new google.maps.LatLng(40.427432, -3.707434),
new google.maps.LatLng(40.427437, -3.707393),
new google.maps.LatLng(40.427464, -3.706702),
new google.maps.LatLng(40.427475, -3.706418),
new google.maps.LatLng(40.427467, -3.706265),
new google.maps.LatLng(40.427967, -3.706165),
new google.maps.LatLng(40.428048, -3.706151),
new google.maps.LatLng(40.428045, -3.705988),
new google.maps.LatLng(40.427966, -3.705586),
new google.maps.LatLng(40.427936, -3.705405),
new google.maps.LatLng(40.427853, -3.704952),
new google.maps.LatLng(40.427647, -3.70393),
new google.maps.LatLng(40.427634, -3.703864),
new google.maps.LatLng(40.427612, -3.703866),
new google.maps.LatLng(40.427589, -3.703869),
new google.maps.LatLng(40.427278, -3.703926),
new google.maps.LatLng(40.427233, -3.703934),
new google.maps.LatLng(40.427203, -3.703648),
new google.maps.LatLng(40.427195, -3.703571),
new google.maps.LatLng(40.42719, -3.703538),
new google.maps.LatLng(40.426987, -3.703572),
new google.maps.LatLng(40.426974, -3.703575),
new google.maps.LatLng(40.426942, -3.703586),
new google.maps.LatLng(40.42692, -3.70359),
new google.maps.LatLng(40.426906, -3.703592),
new google.maps.LatLng(40.426893, -3.703593),
new google.maps.LatLng(40.426884, -3.703593),
new google.maps.LatLng(40.42687, -3.703591),
new google.maps.LatLng(40.426857, -3.703586),
new google.maps.LatLng(40.426848, -3.703577),
new google.maps.LatLng(40.426663, -3.703611),
new google.maps.LatLng(40.426347, -3.703669),
new google.maps.LatLng(40.426316, -3.703676),
new google.maps.LatLng(40.426311, -3.703639),
new google.maps.LatLng(40.426298, -3.70354),
new google.maps.LatLng(40.426116, -3.701729),
new google.maps.LatLng(40.426112, -3.701685),
new google.maps.LatLng(40.426078, -3.701199),
new google.maps.LatLng(40.426074, -3.701156),
new google.maps.LatLng(40.426146, -3.701128),
new google.maps.LatLng(40.426102, -3.70111),
new google.maps.LatLng(40.425872, -3.70101),
new google.maps.LatLng(40.425598, -3.700899),
new google.maps.LatLng(40.425463, -3.700854),
new google.maps.LatLng(40.425433, -3.700681),
new google.maps.LatLng(40.42562, -3.700271),
new google.maps.LatLng(40.425812, -3.699839),
new google.maps.LatLng(40.426022, -3.69939),
new google.maps.LatLng(40.426067, -3.699324),
new google.maps.LatLng(40.426291, -3.698853),
new google.maps.LatLng(40.426637, -3.698263),
new google.maps.LatLng(40.42671, -3.698136),
new google.maps.LatLng(40.426769, -3.698023),
new google.maps.LatLng(40.427069, -3.697595),
new google.maps.LatLng(40.427119, -3.697535),
new google.maps.LatLng(40.427169, -3.697471),
new google.maps.LatLng(40.427797, -3.69711),
new google.maps.LatLng(40.427977, -3.697097),
new google.maps.LatLng(40.42796, -3.697033),
new google.maps.LatLng(40.427837, -3.696453),
new google.maps.LatLng(40.427726, -3.696158),
new google.maps.LatLng(40.427669, -3.695928),
new google.maps.LatLng(40.427616, -3.695661),
new google.maps.LatLng(40.428139, -3.695696),
new google.maps.LatLng(40.428853, -3.696005),
new google.maps.LatLng(40.429302, -3.696197),
new google.maps.LatLng(40.42972, -3.696376),
new google.maps.LatLng(40.429726, -3.69617),
new google.maps.LatLng(40.429682, -3.695167),
new google.maps.LatLng(40.429773, -3.695159),
new google.maps.LatLng(40.430665, -3.695085),
new google.maps.LatLng(40.430755, -3.695078),
new google.maps.LatLng(40.430639, -3.693428),
new google.maps.LatLng(40.430738, -3.693419),
new google.maps.LatLng(40.431153, -3.69338),
new google.maps.LatLng(40.431671, -3.693339),
new google.maps.LatLng(40.43177, -3.693331),
new google.maps.LatLng(40.43186, -3.693324),
new google.maps.LatLng(40.432478, -3.693276),
new google.maps.LatLng(40.432739, -3.693252),
new google.maps.LatLng(40.432901, -3.693242)
  ], [
new google.maps.LatLng(40.427424, -3.699115),
new google.maps.LatLng(40.427964, -3.69924),
new google.maps.LatLng(40.428203, -3.699299),
new google.maps.LatLng(40.428266, -3.699305),
new google.maps.LatLng(40.428432, -3.699329),
new google.maps.LatLng(40.428463, -3.699454),
new google.maps.LatLng(40.428542, -3.699836),
new google.maps.LatLng(40.428664, -3.700415),
new google.maps.LatLng(40.428844, -3.701258),
new google.maps.LatLng(40.428848, -3.701273),
new google.maps.LatLng(40.428901, -3.701504),
new google.maps.LatLng(40.42891, -3.701553),
new google.maps.LatLng(40.428962, -3.701781),
new google.maps.LatLng(40.429049, -3.702306),
new google.maps.LatLng(40.428748, -3.702163),
new google.maps.LatLng(40.428645, -3.702123),
new google.maps.LatLng(40.427962, -3.701857),
new google.maps.LatLng(40.427548, -3.701696),
new google.maps.LatLng(40.42727, -3.701581),
new google.maps.LatLng(40.427262, -3.70145),
new google.maps.LatLng(40.427297, -3.700851),
new google.maps.LatLng(40.427306, -3.70076),
new google.maps.LatLng(40.427312, -3.700656),
new google.maps.LatLng(40.427356, -3.700048),
new google.maps.LatLng(40.427361, -3.699976),
new google.maps.LatLng(40.42737, -3.699884),
new google.maps.LatLng(40.427371, -3.699837),
new google.maps.LatLng(40.427406, -3.699245),
new google.maps.LatLng(40.427424, -3.699115)
]];


http://jsfiddle.net/zey0v9jp/

为什么我的数据中的内环具有背景颜色？

我不知道是什么原因。

最佳答案

“孔”的缠绕方向需要与外边界的缠绕方向相反。

反转内边界中的坐标顺序：

var paths_innerBW = [];
paths_innerBW =[paths[0],[]];
for (var i=0;i<paths[1].length; i++) {
    paths_innerBW[1][i] = paths[1][paths[1].length-i-1];
}


updated fiddle

代码段：



var paths = [
  [
    new google.maps.LatLng(40.432901, -3.693242),
    new google.maps.LatLng(40.432896, -3.693366),
    new google.maps.LatLng(40.432842, -3.694789),
    new google.maps.LatLng(40.432833, -3.694912),
    new google.maps.LatLng(40.432999, -3.6949),
    new google.maps.LatLng(40.433829, -3.694829),
    new google.maps.LatLng(40.433932, -3.694822),
    new google.maps.LatLng(40.434022, -3.694816),
    new google.maps.LatLng(40.434928, -3.69474),
    new google.maps.LatLng(40.435077, -3.694725),
    new google.maps.LatLng(40.435076, -3.69485),
    new google.maps.LatLng(40.435035, -3.696426),
    new google.maps.LatLng(40.435179, -3.696416),
    new google.maps.LatLng(40.435567, -3.69639),
    new google.maps.LatLng(40.435662, -3.696382),
    new google.maps.LatLng(40.435658, -3.696257),
    new google.maps.LatLng(40.435581, -3.694807),
    new google.maps.LatLng(40.435573, -3.694681),
    new google.maps.LatLng(40.436564, -3.694595),
    new google.maps.LatLng(40.436663, -3.694583),
    new google.maps.LatLng(40.436663, -3.69471),
    new google.maps.LatLng(40.43669, -3.696191),
    new google.maps.LatLng(40.436689, -3.696313),
    new google.maps.LatLng(40.436779, -3.696306),
    new google.maps.LatLng(40.436977, -3.696294),
    new google.maps.LatLng(40.438149, -3.696219),
    new google.maps.LatLng(40.438307, -3.696203),
    new google.maps.LatLng(40.43831, -3.696327),
    new google.maps.LatLng(40.43837, -3.697579),
    new google.maps.LatLng(40.438374, -3.697701),
    new google.maps.LatLng(40.438378, -3.697828),
    new google.maps.LatLng(40.438406, -3.698438),
    new google.maps.LatLng(40.438406, -3.698476),
    new google.maps.LatLng(40.438414, -3.698542),
    new google.maps.LatLng(40.438442, -3.699126),
    new google.maps.LatLng(40.438446, -3.699248),
    new google.maps.LatLng(40.438454, -3.699373),
    new google.maps.LatLng(40.438479, -3.699828),
    new google.maps.LatLng(40.438487, -3.699974),
    new google.maps.LatLng(40.438494, -3.700201),
    new google.maps.LatLng(40.438511, -3.700501),
    new google.maps.LatLng(40.43853, -3.700995),
    new google.maps.LatLng(40.438606, -3.702541),
    new google.maps.LatLng(40.438657, -3.70377),
    new google.maps.LatLng(40.438669, -3.704118),
    new google.maps.LatLng(40.438685, -3.704454),
    new google.maps.LatLng(40.438719, -3.705496),
    new google.maps.LatLng(40.438738, -3.706029),
    new google.maps.LatLng(40.438749, -3.70643),
    new google.maps.LatLng(40.438764, -3.706876),
    new google.maps.LatLng(40.438802, -3.708035),
    new google.maps.LatLng(40.43881, -3.708214),
    new google.maps.LatLng(40.438648, -3.708229),
    new google.maps.LatLng(40.437531, -3.708311),
    new google.maps.LatLng(40.437445, -3.708318),
    new google.maps.LatLng(40.437449, -3.70846),
    new google.maps.LatLng(40.437512, -3.709802),
    new google.maps.LatLng(40.43752, -3.709965),
    new google.maps.LatLng(40.437529, -3.710104),
    new google.maps.LatLng(40.437572, -3.711025),
    new google.maps.LatLng(40.437581, -3.71115),
    new google.maps.LatLng(40.437482, -3.711158),
    new google.maps.LatLng(40.436981, -3.7112),
    new google.maps.LatLng(40.436981, -3.711189),
    new google.maps.LatLng(40.436418, -3.711233),
    new google.maps.LatLng(40.436323, -3.711242),
    new google.maps.LatLng(40.436315, -3.711118),
    new google.maps.LatLng(40.436271, -3.710183),
    new google.maps.LatLng(40.436263, -3.710039),
    new google.maps.LatLng(40.436255, -3.709882),
    new google.maps.LatLng(40.436191, -3.708552),
    new google.maps.LatLng(40.436183, -3.708409),
    new google.maps.LatLng(40.436093, -3.708416),
    new google.maps.LatLng(40.435205, -3.708492),
    new google.maps.LatLng(40.43511, -3.708498),
    new google.maps.LatLng(40.435114, -3.708649),
    new google.maps.LatLng(40.435205, -3.709957),
    new google.maps.LatLng(40.435213, -3.71011),
    new google.maps.LatLng(40.435221, -3.710261),
    new google.maps.LatLng(40.435256, -3.711201),
    new google.maps.LatLng(40.43526, -3.71133),
    new google.maps.LatLng(40.435165, -3.71134),
    new google.maps.LatLng(40.434737, -3.711375),
    new google.maps.LatLng(40.434656, -3.711381),
    new google.maps.LatLng(40.434259, -3.711413),
    new google.maps.LatLng(40.434156, -3.711417),
    new google.maps.LatLng(40.434061, -3.711421),
    new google.maps.LatLng(40.433061, -3.711503),
    new google.maps.LatLng(40.43297, -3.711511),
    new google.maps.LatLng(40.432867, -3.71152),
    new google.maps.LatLng(40.432479, -3.711552),
    new google.maps.LatLng(40.431835, -3.711604),
    new google.maps.LatLng(40.431745, -3.711613),
    new google.maps.LatLng(40.431654, -3.711621),
    new google.maps.LatLng(40.431114, -3.711668),
    new google.maps.LatLng(40.43037, -3.711735),
    new google.maps.LatLng(40.430203, -3.711835),
    new google.maps.LatLng(40.430186, -3.711648),
    new google.maps.LatLng(40.430063, -3.710426),
    new google.maps.LatLng(40.429927, -3.709089),
    new google.maps.LatLng(40.429914, -3.708938),
    new google.maps.LatLng(40.429905, -3.708896),
    new google.maps.LatLng(40.429892, -3.708799),
    new google.maps.LatLng(40.429843, -3.708805),
    new google.maps.LatLng(40.428921, -3.70936),
    new google.maps.LatLng(40.42883, -3.709443),
    new google.maps.LatLng(40.42873, -3.70953),
    new google.maps.LatLng(40.428568, -3.709635),
    new google.maps.LatLng(40.428519, -3.709499),
    new google.maps.LatLng(40.428316, -3.709481),
    new google.maps.LatLng(40.428321, -3.709417),
    new google.maps.LatLng(40.428325, -3.708782),
    new google.maps.LatLng(40.428329, -3.708081),
    new google.maps.LatLng(40.428335, -3.707872),
    new google.maps.LatLng(40.428295, -3.707878),
    new google.maps.LatLng(40.428006, -3.707928),
    new google.maps.LatLng(40.427974, -3.707933),
    new google.maps.LatLng(40.428005, -3.707338),
    new google.maps.LatLng(40.427973, -3.707343),
    new google.maps.LatLng(40.427964, -3.707345),
    new google.maps.LatLng(40.427473, -3.707427),
    new google.maps.LatLng(40.427432, -3.707434),
    new google.maps.LatLng(40.427437, -3.707393),
    new google.maps.LatLng(40.427464, -3.706702),
    new google.maps.LatLng(40.427475, -3.706418),
    new google.maps.LatLng(40.427467, -3.706265),
    new google.maps.LatLng(40.427967, -3.706165),
    new google.maps.LatLng(40.428048, -3.706151),
    new google.maps.LatLng(40.428045, -3.705988),
    new google.maps.LatLng(40.427966, -3.705586),
    new google.maps.LatLng(40.427936, -3.705405),
    new google.maps.LatLng(40.427853, -3.704952),
    new google.maps.LatLng(40.427647, -3.70393),
    new google.maps.LatLng(40.427634, -3.703864),
    new google.maps.LatLng(40.427612, -3.703866),
    new google.maps.LatLng(40.427589, -3.703869),
    new google.maps.LatLng(40.427278, -3.703926),
    new google.maps.LatLng(40.427233, -3.703934),
    new google.maps.LatLng(40.427203, -3.703648),
    new google.maps.LatLng(40.427195, -3.703571),
    new google.maps.LatLng(40.42719, -3.703538),
    new google.maps.LatLng(40.426987, -3.703572),
    new google.maps.LatLng(40.426974, -3.703575),
    new google.maps.LatLng(40.426942, -3.703586),
    new google.maps.LatLng(40.42692, -3.70359),
    new google.maps.LatLng(40.426906, -3.703592),
    new google.maps.LatLng(40.426893, -3.703593),
    new google.maps.LatLng(40.426884, -3.703593),
    new google.maps.LatLng(40.42687, -3.703591),
    new google.maps.LatLng(40.426857, -3.703586),
    new google.maps.LatLng(40.426848, -3.703577),
    new google.maps.LatLng(40.426663, -3.703611),
    new google.maps.LatLng(40.426347, -3.703669),
    new google.maps.LatLng(40.426316, -3.703676),
    new google.maps.LatLng(40.426311, -3.703639),
    new google.maps.LatLng(40.426298, -3.70354),
    new google.maps.LatLng(40.426116, -3.701729),
    new google.maps.LatLng(40.426112, -3.701685),
    new google.maps.LatLng(40.426078, -3.701199),
    new google.maps.LatLng(40.426074, -3.701156),
    new google.maps.LatLng(40.426146, -3.701128),
    new google.maps.LatLng(40.426102, -3.70111),
    new google.maps.LatLng(40.425872, -3.70101),
    new google.maps.LatLng(40.425598, -3.700899),
    new google.maps.LatLng(40.425463, -3.700854),
    new google.maps.LatLng(40.425433, -3.700681),
    new google.maps.LatLng(40.42562, -3.700271),
    new google.maps.LatLng(40.425812, -3.699839),
    new google.maps.LatLng(40.426022, -3.69939),
    new google.maps.LatLng(40.426067, -3.699324),
    new google.maps.LatLng(40.426291, -3.698853),
    new google.maps.LatLng(40.426637, -3.698263),
    new google.maps.LatLng(40.42671, -3.698136),
    new google.maps.LatLng(40.426769, -3.698023),
    new google.maps.LatLng(40.427069, -3.697595),
    new google.maps.LatLng(40.427119, -3.697535),
    new google.maps.LatLng(40.427169, -3.697471),
    new google.maps.LatLng(40.427797, -3.69711),
    new google.maps.LatLng(40.427977, -3.697097),
    new google.maps.LatLng(40.42796, -3.697033),
    new google.maps.LatLng(40.427837, -3.696453),
    new google.maps.LatLng(40.427726, -3.696158),
    new google.maps.LatLng(40.427669, -3.695928),
    new google.maps.LatLng(40.427616, -3.695661),
    new google.maps.LatLng(40.428139, -3.695696),
    new google.maps.LatLng(40.428853, -3.696005),
    new google.maps.LatLng(40.429302, -3.696197),
    new google.maps.LatLng(40.42972, -3.696376),
    new google.maps.LatLng(40.429726, -3.69617),
    new google.maps.LatLng(40.429682, -3.695167),
    new google.maps.LatLng(40.429773, -3.695159),
    new google.maps.LatLng(40.430665, -3.695085),
    new google.maps.LatLng(40.430755, -3.695078),
    new google.maps.LatLng(40.430639, -3.693428),
    new google.maps.LatLng(40.430738, -3.693419),
    new google.maps.LatLng(40.431153, -3.69338),
    new google.maps.LatLng(40.431671, -3.693339),
    new google.maps.LatLng(40.43177, -3.693331),
    new google.maps.LatLng(40.43186, -3.693324),
    new google.maps.LatLng(40.432478, -3.693276),
    new google.maps.LatLng(40.432739, -3.693252),
    new google.maps.LatLng(40.432901, -3.693242)
  ],
  [
    new google.maps.LatLng(40.427424, -3.699115),
    new google.maps.LatLng(40.427964, -3.69924),
    new google.maps.LatLng(40.428203, -3.699299),
    new google.maps.LatLng(40.428266, -3.699305),
    new google.maps.LatLng(40.428432, -3.699329),
    new google.maps.LatLng(40.428463, -3.699454),
    new google.maps.LatLng(40.428542, -3.699836),
    new google.maps.LatLng(40.428664, -3.700415),
    new google.maps.LatLng(40.428844, -3.701258),
    new google.maps.LatLng(40.428848, -3.701273),
    new google.maps.LatLng(40.428901, -3.701504),
    new google.maps.LatLng(40.42891, -3.701553),
    new google.maps.LatLng(40.428962, -3.701781),
    new google.maps.LatLng(40.429049, -3.702306),
    new google.maps.LatLng(40.428748, -3.702163),
    new google.maps.LatLng(40.428645, -3.702123),
    new google.maps.LatLng(40.427962, -3.701857),
    new google.maps.LatLng(40.427548, -3.701696),
    new google.maps.LatLng(40.42727, -3.701581),
    new google.maps.LatLng(40.427262, -3.70145),
    new google.maps.LatLng(40.427297, -3.700851),
    new google.maps.LatLng(40.427306, -3.70076),
    new google.maps.LatLng(40.427312, -3.700656),
    new google.maps.LatLng(40.427356, -3.700048),
    new google.maps.LatLng(40.427361, -3.699976),
    new google.maps.LatLng(40.42737, -3.699884),
    new google.maps.LatLng(40.427371, -3.699837),
    new google.maps.LatLng(40.427406, -3.699245),
    new google.maps.LatLng(40.427424, -3.699115)
  ]
];

var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 14,
  center: new google.maps.LatLng(40.432901, -3.693242),
  mapTypeId: google.maps.MapTypeId.SATELLITE
});
var paths_innerBW = [];
paths_innerBW = [paths[0],
  []
];
for (var i = 0; i < paths[1].length; i++) {
  paths_innerBW[1][i] = paths[1][paths[1].length - i - 1];
}

var poly = new google.maps.Polygon({
  paths: paths_innerBW,
  strokeWeight: 3,
  fillColor: '#55FF55',
  fillOpacity: 0.5
});

poly.setMap(map);

#map {
  width: 450px;
  height: 400px;
}

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

关于javascript - 背景内环Google Maps(多边形中的孔)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30646685/

10-10 18:52
Powered by LMLPHP ©2024 内环 0.034139