Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2020, 22:29
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 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>
Ответить с цитированием
  #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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Цикл while в JavaScript. Mugla Events/DOM/Window 9 15.04.2014 20:43
Цикл javascript jeka123 Серверные языки и технологии 3 25.08.2013 11:53
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
Как поместить javascript в php цикл do{} while() galap Общие вопросы Javascript 4 09.04.2010 14:57