28.05.2020, 22:29
|
|
Аспирант
|
|
Регистрация: 05.09.2019
Сообщений: 84
|
|
|
цикл javascript
доброе время суток у меня есть гугл карта и полигони и надо чтоб по клику выводились номера полигона проблема в том что я не знаю как это сделать без функции а из функции выводится останий полигон
https://developers.google.com/maps/d...polygon-arrays
<body>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 500px;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAnMcgQ4TqGttyFKA5hxWYxIkzZpo3V8&callback=initMap" async defer></script>
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 50.475713,
lng: 30.516879
},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var Coordinates = [{
"id": "1",
"delete": "0",
"date": "0000-00-00 00:00:00",
"altered": "0000-00-00 00:00:00",
"region": "\u041a\u0438\u0435\u0432",
"number": "71",
"number_avto": "A\u04109612MO",
"company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
"polygon": "[{\"lat\": 50.47674958836734, \"lng\": 30.493953871490476}, {\"lat\": 50.475309302071445, \"lng\": 30.495704056793215}, {\"lat\": 50.474063853648836, \"lng\": 30.49422466986084}, {\"lat\": 50.47320895722949, \"lng\": 30.49427891026312}, {\"lat\": 50.472572552772064, \"lng\": 30.49364650515747}, {\"lat\": 50.47134751780746, \"lng\": 30.492950323257446}, {\"lat\": 50.470256983547614, \"lng\": 30.491679552406367}, {\"lat\": 50.46924734941041, \"lng\": 30.490926149784173}, {\"lat\": 50.465116242336634, \"lng\": 30.487346890909294}, {\"lat\": 50.46388061190283, \"lng\": 30.487898233917235}, {\"lat\": 50.45984277476289, \"lng\": 30.48338869568056}, {\"lat\": 50.456463079337894, \"lng\": 30.480110179491476}, {\"lat\": 50.452099445789955, \"lng\": 30.47760413949868}, {\"lat\": 50.44992157612657, \"lng\": 30.48818727949856}, {\"lat\": 50.44910997180602, \"lng\": 30.49383515491104}, {\"lat\": 50.44858801010621, \"lng\": 30.495888237251393}, {\"lat\": 50.448641710126985, \"lng\": 30.497545195589964}, {\"lat\": 50.44784190593388, \"lng\": 30.498376356968265}, {\"lat\": 50.446188077029404, \"lng\": 30.499153874166268}, {\"lat\": 50.4439110070313, \"lng\": 30.512129107715168}, {\"lat\": 50.44282764487858, \"lng\": 30.52010877441319}, {\"lat\": 50.44741131849923, \"lng\": 30.52222790929227}, {\"lat\": 50.447505359439624, \"lng\": 30.522281932987198}, {\"lat\": 50.44758412969209, \"lng\": 30.522497268737652}, {\"lat\": 50.44917635269867, \"lng\": 30.52372187410697}, {\"lat\": 50.45109683800667, \"lng\": 30.527276154959736}, {\"lat\": 50.451500702391556, \"lng\": 30.528142862379582}, {\"lat\": 50.45060659361875, \"lng\": 30.52935289255322}, {\"lat\": 50.45218456100838, \"lng\": 30.53454367481322}, {\"lat\": 50.453666840867605, \"lng\": 30.53721318059911}, {\"lat\": 50.45599925084942, \"lng\": 30.531309787612827}, {\"lat\": 50.456736277693906, \"lng\": 30.529893879363954}, {\"lat\": 50.457907029196186, \"lng\": 30.528081004180876}, {\"lat\": 50.460986779261845, \"lng\": 30.525619034416195}, {\"lat\": 50.4669647056591, \"lng\": 30.524616484466605}, {\"lat\": 50.47107157507795, \"lng\": 30.524606053741536}, {\"lat\": 50.47192786481432, \"lng\": 30.523308162689204}, {\"lat\": 50.476818524839466, \"lng\": 30.511938024810775}, {\"lat\": 50.477310557159385, \"lng\": 30.505297482376136}, {\"lat\": 50.4801236872805, \"lng\": 30.505281692665108}, {\"lat\": 50.48047892219089, \"lng\": 30.501360606628396}, {\"lat\": 50.4783080422313, \"lng\": 30.500625984901376}, {\"lat\": 50.47854039632276, \"lng\": 30.498861394912637}, {\"lat\": 50.479366623693544, \"lng\": 30.49759286182018}, {\"lat\": 50.4791687394576, \"lng\": 30.49769761974335}, {\"lat\": 50.48114192312777, \"lng\": 30.490249277080466}, {\"lat\": 50.47936012517129, \"lng\": 30.490096542938204}, {\"lat\": 50.47795928900465, \"lng\": 30.492904971771168}]",
"color": "#fef200"
}, {
"id": "2",
"delete": "0",
"date": "0000-00-00 00:00:00",
"altered": "0000-00-00 00:00:00",
"region": "\u041a\u0438\u0435\u0432",
"number": "72",
"number_avto": "\u0410\u04102363\u0420\u0410",
"company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
"polygon": "[{\"lat\": 50.518486179037176, \"lng\": 30.459471392395017}, {\"lat\": 50.51360885678462, \"lng\": 30.456252157589006}, {\"lat\": 50.506110880829375, \"lng\": 30.459255647697432}, {\"lat\": 50.50012037289259, \"lng\": 30.460885262802094}, {\"lat\": 50.48961149033943, \"lng\": 30.4700668105163}, {\"lat\": 50.48786763996452, \"lng\": 30.478988530212405}, {\"lat\": 50.48847649762083, \"lng\": 30.483518483917237}, {\"lat\": 50.48618493179595, \"lng\": 30.489543321586552}, {\"lat\": 50.48460220660303, \"lng\": 30.48950875098035}, {\"lat\": 50.48214558580464, \"lng\": 30.489474180374145}, {\"lat\": 50.48076856089214, \"lng\": 30.49039209207922}, {\"lat\": 50.4811996902367, \"lng\": 30.49402678340539}, {\"lat\": 50.47939439932129, \"lng\": 30.49970651004992}, {\"lat\": 50.482340821721166, \"lng\": 30.501094702270507}, {\"lat\": 50.482936096904346, \"lng\": 30.515001658691403}, {\"lat\": 50.482429535005174, \"lng\": 30.52099967427057}, {\"lat\": 50.48246912376432, \"lng\": 30.52699768984985}, {\"lat\": 50.48128736691, \"lng\": 30.53276473734286}, {\"lat\": 50.48250871249031, \"lng\": 30.537845139328056}, {\"lat\": 50.48567253430273, \"lng\": 30.535643194782324}, {\"lat\": 50.48594183510836, \"lng\": 30.5297505306321}, {\"lat\": 50.48746716996721, \"lng\": 30.530423914150333}, {\"lat\": 50.48831173181515, \"lng\": 30.53239138899039}, {\"lat\": 50.48839176647237, \"lng\": 30.52594745635986}, {\"lat\": 50.48865820109151, \"lng\": 30.52845830754086}, {\"lat\": 50.48942975396104, \"lng\": 30.531248108459522}, {\"lat\": 50.49254402578211, \"lng\": 30.544530483387007}, {\"lat\": 50.49316007397842, \"lng\": 30.543758083076455}, {\"lat\": 50.493777985809984, \"lng\": 30.54370176617283}, {\"lat\": 50.49453239313523, \"lng\": 30.54278714238444}, {\"lat\": 50.49342031778105, \"lng\": 30.54104372549625}, {\"lat\": 50.49272500960682, \"lng\": 30.54176259545511}, {\"lat\": 50.49032415837577, \"lng\": 30.53161319242861}, {\"lat\": 50.49524550636781, \"lng\": 30.52260127368163}, {\"lat\": 50.5123059660119, \"lng\": 30.513933588317855}, {\"lat\": 50.51485116560912, \"lng\": 30.51615506446842}, {\"lat\": 50.52225314600434, \"lng\": 30.52275390573118}, {\"lat\": 50.53298205380208, \"lng\": 30.512229524642862}, {\"lat\": 50.53305387865268, \"lng\": 30.499500064201357}, {\"lat\": 50.53303523423201, \"lng\": 30.485839725459982}, {\"lat\": 50.54014970376445, \"lng\": 30.48536434185496}, {\"lat\": 50.54060870430012, \"lng\": 30.49209873608197}, {\"lat\": 50.55624544245322, \"lng\": 30.492333113066024}, {\"lat\": 50.571222847713784, \"lng\": 30.4888767704457}, {\"lat\": 50.57626535215849, \"lng\": 30.493119302760988}, {\"lat\": 50.586648111220214, \"lng\": 30.496846850945303}, {\"lat\": 50.591171316276174, \"lng\": 30.48366575349985}, {\"lat\": 50.58130802291522, \"lng\": 30.470312994677442}, {\"lat\": 50.567355114844794, \"lng\": 30.454152478186643}, {\"lat\": 50.562287573724355, \"lng\": 30.46818001698216}, {\"lat\": 50.55362327117492, \"lng\": 30.47331830075018}, {\"lat\": 50.548290036917756, \"lng\": 30.478788349731417}]",
"color": "#fccc00"
}
];
var object_in_array = [];
for (var i = 0; i < Coordinates.length; i++) {
let coordinate = JSON.parse(Coordinates[i].polygon);
Poligon = new google.maps.Polygon({
paths: coordinate,
strokeColor: Coordinates[i].color,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: Coordinates[i].color,
fillOpacity: 0.35,
Editable: true,
draggable: true
});
Poligon.setMap(map);
var namePolygon = Coordinates[i].number;
var contentString = '<div id="content">'+namePolygon+'</div>';
var infowindow = new google.maps.InfoWindow({content: contentString});
Poligon.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
};
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();
var content = '<div id="content">'+namePolygon+'</div>';
var vertices = this.getPath();
var contentString = content;
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
</script>
|
|
29.05.2020, 09:50
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
misha.korolcov, функция так и так нужна, это ведь обработчик события при нажатии. Вам нужно указать для каждого обработчика нажатии у многоугольника своё значение для вывода.
Также исправьте генерирование данных, чтобы не было JSON внутри JSON.
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAnMcgQ4TqGttyFKA5hxWYxIkzZpo3V8&callback=initMap" async defer></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 50.475713,
lng: 30.516879
},
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow();
var coords = [{
"id": "1",
"delete": "0",
"date": "0000-00-00 00:00:00",
"altered": "0000-00-00 00:00:00",
"region": "\u041a\u0438\u0435\u0432",
"number": "71",
"number_avto": "A\u04109612MO",
"company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
"polygon": "[{\"lat\": 50.47674958836734, \"lng\": 30.493953871490476}, {\"lat\": 50.475309302071445, \"lng\": 30.495704056793215}, {\"lat\": 50.474063853648836, \"lng\": 30.49422466986084}, {\"lat\": 50.47320895722949, \"lng\": 30.49427891026312}, {\"lat\": 50.472572552772064, \"lng\": 30.49364650515747}, {\"lat\": 50.47134751780746, \"lng\": 30.492950323257446}, {\"lat\": 50.470256983547614, \"lng\": 30.491679552406367}, {\"lat\": 50.46924734941041, \"lng\": 30.490926149784173}, {\"lat\": 50.465116242336634, \"lng\": 30.487346890909294}, {\"lat\": 50.46388061190283, \"lng\": 30.487898233917235}, {\"lat\": 50.45984277476289, \"lng\": 30.48338869568056}, {\"lat\": 50.456463079337894, \"lng\": 30.480110179491476}, {\"lat\": 50.452099445789955, \"lng\": 30.47760413949868}, {\"lat\": 50.44992157612657, \"lng\": 30.48818727949856}, {\"lat\": 50.44910997180602, \"lng\": 30.49383515491104}, {\"lat\": 50.44858801010621, \"lng\": 30.495888237251393}, {\"lat\": 50.448641710126985, \"lng\": 30.497545195589964}, {\"lat\": 50.44784190593388, \"lng\": 30.498376356968265}, {\"lat\": 50.446188077029404, \"lng\": 30.499153874166268}, {\"lat\": 50.4439110070313, \"lng\": 30.512129107715168}, {\"lat\": 50.44282764487858, \"lng\": 30.52010877441319}, {\"lat\": 50.44741131849923, \"lng\": 30.52222790929227}, {\"lat\": 50.447505359439624, \"lng\": 30.522281932987198}, {\"lat\": 50.44758412969209, \"lng\": 30.522497268737652}, {\"lat\": 50.44917635269867, \"lng\": 30.52372187410697}, {\"lat\": 50.45109683800667, \"lng\": 30.527276154959736}, {\"lat\": 50.451500702391556, \"lng\": 30.528142862379582}, {\"lat\": 50.45060659361875, \"lng\": 30.52935289255322}, {\"lat\": 50.45218456100838, \"lng\": 30.53454367481322}, {\"lat\": 50.453666840867605, \"lng\": 30.53721318059911}, {\"lat\": 50.45599925084942, \"lng\": 30.531309787612827}, {\"lat\": 50.456736277693906, \"lng\": 30.529893879363954}, {\"lat\": 50.457907029196186, \"lng\": 30.528081004180876}, {\"lat\": 50.460986779261845, \"lng\": 30.525619034416195}, {\"lat\": 50.4669647056591, \"lng\": 30.524616484466605}, {\"lat\": 50.47107157507795, \"lng\": 30.524606053741536}, {\"lat\": 50.47192786481432, \"lng\": 30.523308162689204}, {\"lat\": 50.476818524839466, \"lng\": 30.511938024810775}, {\"lat\": 50.477310557159385, \"lng\": 30.505297482376136}, {\"lat\": 50.4801236872805, \"lng\": 30.505281692665108}, {\"lat\": 50.48047892219089, \"lng\": 30.501360606628396}, {\"lat\": 50.4783080422313, \"lng\": 30.500625984901376}, {\"lat\": 50.47854039632276, \"lng\": 30.498861394912637}, {\"lat\": 50.479366623693544, \"lng\": 30.49759286182018}, {\"lat\": 50.4791687394576, \"lng\": 30.49769761974335}, {\"lat\": 50.48114192312777, \"lng\": 30.490249277080466}, {\"lat\": 50.47936012517129, \"lng\": 30.490096542938204}, {\"lat\": 50.47795928900465, \"lng\": 30.492904971771168}]",
"color": "#fef200"
}, {
"id": "2",
"delete": "0",
"date": "0000-00-00 00:00:00",
"altered": "0000-00-00 00:00:00",
"region": "\u041a\u0438\u0435\u0432",
"number": "72",
"number_avto": "\u0410\u04102363\u0420\u0410",
"company": "\u041e\u0445\u0440\u0430\u043d\u043d\u044b\u0439 \u0425\u043e\u043b\u0434\u0438\u043d\u0433",
"polygon": "[{\"lat\": 50.518486179037176, \"lng\": 30.459471392395017}, {\"lat\": 50.51360885678462, \"lng\": 30.456252157589006}, {\"lat\": 50.506110880829375, \"lng\": 30.459255647697432}, {\"lat\": 50.50012037289259, \"lng\": 30.460885262802094}, {\"lat\": 50.48961149033943, \"lng\": 30.4700668105163}, {\"lat\": 50.48786763996452, \"lng\": 30.478988530212405}, {\"lat\": 50.48847649762083, \"lng\": 30.483518483917237}, {\"lat\": 50.48618493179595, \"lng\": 30.489543321586552}, {\"lat\": 50.48460220660303, \"lng\": 30.48950875098035}, {\"lat\": 50.48214558580464, \"lng\": 30.489474180374145}, {\"lat\": 50.48076856089214, \"lng\": 30.49039209207922}, {\"lat\": 50.4811996902367, \"lng\": 30.49402678340539}, {\"lat\": 50.47939439932129, \"lng\": 30.49970651004992}, {\"lat\": 50.482340821721166, \"lng\": 30.501094702270507}, {\"lat\": 50.482936096904346, \"lng\": 30.515001658691403}, {\"lat\": 50.482429535005174, \"lng\": 30.52099967427057}, {\"lat\": 50.48246912376432, \"lng\": 30.52699768984985}, {\"lat\": 50.48128736691, \"lng\": 30.53276473734286}, {\"lat\": 50.48250871249031, \"lng\": 30.537845139328056}, {\"lat\": 50.48567253430273, \"lng\": 30.535643194782324}, {\"lat\": 50.48594183510836, \"lng\": 30.5297505306321}, {\"lat\": 50.48746716996721, \"lng\": 30.530423914150333}, {\"lat\": 50.48831173181515, \"lng\": 30.53239138899039}, {\"lat\": 50.48839176647237, \"lng\": 30.52594745635986}, {\"lat\": 50.48865820109151, \"lng\": 30.52845830754086}, {\"lat\": 50.48942975396104, \"lng\": 30.531248108459522}, {\"lat\": 50.49254402578211, \"lng\": 30.544530483387007}, {\"lat\": 50.49316007397842, \"lng\": 30.543758083076455}, {\"lat\": 50.493777985809984, \"lng\": 30.54370176617283}, {\"lat\": 50.49453239313523, \"lng\": 30.54278714238444}, {\"lat\": 50.49342031778105, \"lng\": 30.54104372549625}, {\"lat\": 50.49272500960682, \"lng\": 30.54176259545511}, {\"lat\": 50.49032415837577, \"lng\": 30.53161319242861}, {\"lat\": 50.49524550636781, \"lng\": 30.52260127368163}, {\"lat\": 50.5123059660119, \"lng\": 30.513933588317855}, {\"lat\": 50.51485116560912, \"lng\": 30.51615506446842}, {\"lat\": 50.52225314600434, \"lng\": 30.52275390573118}, {\"lat\": 50.53298205380208, \"lng\": 30.512229524642862}, {\"lat\": 50.53305387865268, \"lng\": 30.499500064201357}, {\"lat\": 50.53303523423201, \"lng\": 30.485839725459982}, {\"lat\": 50.54014970376445, \"lng\": 30.48536434185496}, {\"lat\": 50.54060870430012, \"lng\": 30.49209873608197}, {\"lat\": 50.55624544245322, \"lng\": 30.492333113066024}, {\"lat\": 50.571222847713784, \"lng\": 30.4888767704457}, {\"lat\": 50.57626535215849, \"lng\": 30.493119302760988}, {\"lat\": 50.586648111220214, \"lng\": 30.496846850945303}, {\"lat\": 50.591171316276174, \"lng\": 30.48366575349985}, {\"lat\": 50.58130802291522, \"lng\": 30.470312994677442}, {\"lat\": 50.567355114844794, \"lng\": 30.454152478186643}, {\"lat\": 50.562287573724355, \"lng\": 30.46818001698216}, {\"lat\": 50.55362327117492, \"lng\": 30.47331830075018}, {\"lat\": 50.548290036917756, \"lng\": 30.478788349731417}]",
"color": "#fccc00"
}];
var object_in_array = [];
for (var i = 0; i < coords.length; i++) {
var coord = coords[i];
// TODO: исправить генерирование данных
var coordinate = JSON.parse(coords[i].polygon);
polygon = new google.maps.Polygon({
paths: coordinate,
strokeColor: coord.color,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: coord.color,
fillOpacity: 0.35,
Editable: false,
draggable: false
});
polygon.setMap(map);
polygon.addListener('click', showNumber(coord.number));
};
function showNumber(number) {
return function(event) {
infoWindow.setContent(number);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
}
</script>
|
|
|
|
