【发布时间】：2019-09-11 15:56:06
【问题描述】：
我正在尝试在谷歌地图上绘制多个多边形（贝壳）。
我有一个问题： 一个嵌套循环，将每个多边形多次绘制到地图上。
除了代码或多或少的工作。
试图将空数组放入不同的位置并在每次迭代时清除内容 - 但不知何故我找不到正确的方法......感觉这个循环应该以不同的方式构建...... :-)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 47.586, lng: 9},
mapTypeId: 'terrain'
});
//Coordinates
const array = [
[
[
47.42260606,
9.367119279999999
],
[
47.4230557,
9.36666964
],
[
47.4253039,
9.36891784
],
[
47.4253039,
9.372514959999998
],
[
47.42485426,
9.3729646
],
[
47.42125714,
9.3729646
],
[
47.4208075,
9.372514959999998
],
[
47.4208075,
9.37161568
],
[
47.419908219999996,
9.3707164
],
[
47.419908219999996,
9.36891784
],
[
47.42035786,
9.368468199999999
],
[
47.42125714,
9.368468199999999
],
[
47.42260606,
9.367119279999999
]
],
[
[
47.450034099999996,
9.418827879999998
],
[
47.45138302,
9.420176799999998
],
[
47.45093338,
9.420626439999998
],
[
47.44913482,
9.420626439999998
],
[
47.4477859,
9.419277519999998
],
[
47.44823554,
9.418827879999998
],
[
47.450034099999996,
9.418827879999998
]
],
[
[
47.52152686,
9.421975359999998
],
[
47.5219765,
9.421525719999998
],
[
47.52287578,
9.421525719999998
],
[
47.52332542,
9.421975359999998
],
[
47.52332542,
9.422874639999998
],
[
47.5242247,
9.423773919999999
],
[
47.5242247,
9.425572479999998
],
[
47.52287578,
9.426921399999998
],
[
47.52107722,
9.426921399999998
],
[
47.5197283,
9.425572479999998
],
[
47.5197283,
9.422874639999998
],
[
47.520177939999996,
9.422424999999999
],
[
47.52107722,
9.422424999999999
],
[
47.52152686,
9.421975359999998
]
],
[
[
47.510285859999996,
9.427820679999998
],
[
47.51118514,
9.428719959999999
],
[
47.51208442,
9.428719959999999
],
[
47.51253406,
9.429169599999998
],
[
47.51253406,
9.430968159999997
],
[
47.515231899999996,
9.433665999999999
],
[
47.51388298,
9.435014919999999
],
[
47.5129837,
9.435014919999999
],
[
47.51253406,
9.435464559999998
],
[
47.51343334,
9.436363839999999
],
[
47.51343334,
9.437263119999997
],
[
47.5129837,
9.437712759999998
],
[
47.51208442,
9.437712759999998
],
[
47.51118514,
9.436813479999998
],
[
47.510285859999996,
9.437712759999998
],
[
47.5084873,
9.437712759999998
],
[
47.50803766,
9.437263119999997
],
[
47.50803766,
9.436363839999999
],
[
47.5062391,
9.434565279999998
],
[
47.5062391,
9.432766719999998
],
[
47.50668874,
9.432317079999997
],
[
47.50758802,
9.432317079999997
],
[
47.50803766,
9.431867439999998
],
[
47.50803766,
9.430968159999997
],
[
47.50893694,
9.430068879999999
],
[
47.50893694,
9.428270319999998
],
[
47.50938658,
9.427820679999998
],
[
47.510285859999996,
9.427820679999998
]
],
[
[
47.45857726,
9.426471759999998
],
[
47.45857726,
9.427371039999999
],
[
47.4590269,
9.427820679999998
],
[
47.46082546,
9.427820679999998
],
[
47.46217438,
9.429169599999998
],
[
47.46217438,
9.430968159999997
],
[
47.4612751,
9.431867439999998
],
[
47.4612751,
9.433665999999999
],
[
47.45992618,
9.435014919999999
],
[
47.45767798,
9.432766719999998
],
[
47.45767798,
9.429169599999998
],
[
47.4567787,
9.428270319999998
],
[
47.4567787,
9.426471759999998
],
[
47.45812762,
9.425122839999998
],
[
47.45857726,
9.425572479999998
],
[
47.45857726,
9.426471759999998
]
],
[
[
47.49904486,
9.436363839999999
],
[
47.4994945,
9.435914199999997
],
[
47.50129306,
9.435914199999997
],
[
47.5017427,
9.436363839999999
],
[
47.50084342,
9.437263119999997
],
[
47.50084342,
9.438162399999998
],
[
47.50129306,
9.438612039999997
],
[
47.50219234,
9.438612039999997
],
[
47.50444054,
9.440860239999997
],
[
47.50444054,
9.442658799999998
],
[
47.50129306,
9.445806279999998
],
[
47.49814558,
9.442658799999998
],
[
47.49904486,
9.441759519999998
],
[
47.49904486,
9.440860239999997
],
[
47.49859522,
9.440410599999998
],
[
47.49769594,
9.440410599999998
],
[
47.49634702,
9.439061679999998
],
[
47.49904486,
9.436363839999999
]
],
[
[
47.49589738,
9.453899799999997
],
[
47.4972463,
9.455248719999998
],
[
47.4972463,
9.457047279999998
],
[
47.49814558,
9.457946559999998
],
[
47.49814558,
9.459745119999997
],
[
47.49994414,
9.461543679999997
],
[
47.49994414,
9.463342239999998
],
[
47.49904486,
9.464241519999998
],
[
47.49904486,
9.467838639999997
],
[
47.49679666,
9.470086839999997
],
[
47.49589738,
9.470086839999997
],
[
47.49544774,
9.470536479999998
],
[
47.49544774,
9.471435759999997
],
[
47.4949981,
9.471885399999998
],
[
47.4927499,
9.469637199999998
],
[
47.4927499,
9.468737919999997
],
[
47.49230026,
9.468288279999998
],
[
47.49140098,
9.468288279999998
],
[
47.48960242,
9.470086839999997
],
[
47.48780386,
9.470086839999997
],
[
47.48735422,
9.469637199999998
],
[
47.4882535,
9.468737919999997
],
[
47.4882535,
9.463342239999998
],
[
47.48735422,
9.462442959999997
],
[
47.48735422,
9.458845839999997
],
[
47.48780386,
9.458396199999997
],
[
47.48870314,
9.458396199999997
],
[
47.48915278,
9.457946559999998
],
[
47.48915278,
9.455248719999998
],
[
47.48960242,
9.454799079999997
],
[
47.4949981,
9.454799079999997
],
[
47.49589738,
9.453899799999997
]
]
];
for (var y = 0; y < array.length; y++){
var shell = array[y];
var latLngArray = [];
for (var i = 0; i < shell.length; i++) {
latLngArray.push(new google.maps.LatLng(shell[i][0], shell[i][1]));
// Polygon construction.
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
// latLngArray.length = 0
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</body>
</html>
我怎样才能只绘制一次多边形？
【问题讨论】：
标签： javascript arrays for-loop google-maps-api-3 polygon