javascript - 如何将 geoJSON 数据推送到空数组中以在谷歌地图上构造多个多边形？
问题描述
我正在尝试将多个多边形（贝壳）绘制到谷歌地图上。
我有一个问题：一个嵌套循环，它将每个多边形多次绘制到地图上。
除此之外，代码或多或少都在工作。
试图将空数组放入不同的位置并在每次迭代时清除内容 - 但不知何故我找不到正确的方法......感觉这个循环应该以不同的方式构建...... :-)
<!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>
我怎样才能只绘制一次多边形？
解决方案
您当前正在为每个坐标创建一个新多边形。将多边形创建移到创建路径数组的循环之外。所以：
对于每个多边形
- 创建/清除路径数组。
google.maps.LatLng将其路径解析为对象数组。google.maps.Polygon使用该路径创建一个对象。- 将多边形添加到地图。
// for each polygon in the array
for (var y = 0; y < array.length; y++){
var shell = array[y];
var latLngArray = [];
// create path (array of LatLng objects) for this polygon
for (var i = 0; i < shell.length; i++) {
latLngArray.push(new google.maps.LatLng(shell[i][0], shell[i][1]));
}
// create polygon with the path
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
}
代码片段：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 47.586,
lng: 9
},
mapTypeId: 'terrain'
});
var bounds = new google.maps.LatLngBounds();
for (var y = 0; y < array.length; y++) {
var shell = array[y];
var latLngArray = [];
for (var i = 0; i < shell.length; i++) {
var pt = new google.maps.LatLng(shell[i][0], shell[i][1]);
bounds.extend(pt);
latLngArray.push(pt);
}
// 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);
}
map.fitBounds(bounds);
}
//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
]
]
];html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>推荐阅读
- firebase - Flutter - 小部件变量始终为空
- python - 在 PyTorch 中训练 TFRobertaModel
- angular - ngFor 和 img src，结合 for 值的两个细节
- jwt - WSO2-AM 3.2.0 - OAuth 令牌 - 哈希类型
- node.js - 如何在 MongoDB 中获取最新版本的文档？
- c# - Xamarin Android：错误“java.exe”以代码 1 退出
- python - 使用 Tweepy 将 Twitter 帐户的好友和关注者提取到表格表单中
- powershell - 在 Powershell 中，如何让我的 if 语句输出到哈希表中？
- sql - SQL GROUP BY 结果 - Salesforce Marketing Cloud
- css - 使用条件从日历区域导出 CSV