Показать сообщение отдельно
  #2 (permalink)  
Старый 29.05.2020, 09:50
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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>
Ответить с цитированием