Проблема с доступом к массиву данных в Javascript - PullRequest
Новая
       9

Проблема с доступом к массиву данных в Javascript

1 голос
/ 02 мая 2020

Я пытаюсь написать небольшое веб-приложение, которое будет отображать некоторые местоположения на карте с помощью Google Maps JavaScript API. Работа с API идет хорошо, но я пытаюсь манипулировать их примером, и не могу заставить работать массив данных, если он не объявлен с функцией инициализации Map. Я искал то, что я не понимаю о Javascript доступе к переменным, но я не могу понять это. В идеале я хотел бы поместить массив данных в отдельный тег <script>, чтобы я мог загрузить его из другого файла, но я даже не могу заставить данные работать, если поместить его прямо над функцией в том же теге <script>

Я здесь - упрощенная версия кода, которую я не могу заставить работать. Он не запустится, потому что я удалил свой ключ из вызова API, но если это необходимо, чтобы найти проблему, я могу выдать его тоже. 

<html>
<head>
	<style>
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map {
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>

<div id="map"></div>

// <script src="...">
// where I really want to load let locations = .... from a file
// </script>

<script>

  // where i tried to move let locations = .... without success

  function initMap() {
	const map = new google.maps.Map(document.getElementById("map"), {
		zoom: 2.7,
		center: new google.maps.LatLng(18,0)
	});

	let locations = [
		{
			name: 'MJ Cave',
			position: new google.maps.LatLng(47.517869, 19.036026)
		}, {
			name: 'Protec Tulum',
			position: new google.maps.LatLng(20.216557, -87.460052)
		}, {
			name: 'Giraffe Manor',
			position: new google.maps.LatLng(-1.375528, 36.744634)
		}
	];

	function placeMarker( loc ) {
		const marker = new google.maps.Marker({
			position : loc.position,
			map : map
		});
	}
		
	// ITERATE ALL LOCATIONS. Pass every location to placeMarker
	locations.forEach( placeMarker );
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">    
</script>
</body>
</html>

1 Ответ

0 голосов
/ 02 мая 2020

Проблема решена.

Проблема с вызовом new google.maps.latlng() из функции initMap() была проблемой, потому что этот тип данных не обязательно был определен во время выполнения кода. Изменен объект положения местоположения, который будет определен массивом из двух чисел, а затем преобразован в функцию google.maps.latlng in. Работает как хотелось бы сейчас. Для постарности вот мой измененный код: 

<script>
	let locations = [
		{
		name: 'MJ Cave',
		position: [47.517869, 19.036026]
		}, {
		name: 'Protec Tulum',
		position: [20.216557, -87.460052]
		}, {
		name: 'Giraffe Manor',
		position: [-1.375528, 36.744634]
		}
	];
</script>

<script type="text/javascript">

	function initMap() {
		const infowindow = new google.maps.InfoWindow();
		const map = new google.maps.Map(document.getElementById("map"), {
			zoom: 2.7,
			center: new google.maps.LatLng(18,0)
		});

		function placeMarker( loc ) {
			const marker = new google.maps.Marker({
				position : { lat: loc.position[0], lng: loc.position[1]},
		 		icon: icons[loc.type].icon,
				map : map
			});
		
		// ITERATE ALL LOCATIONS. Pass every location to placeMarker
		locations.forEach( placeMarker );
	}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...