Представление и перезагрузка пользовательских маркеров Google Maps соответственно - PullRequest
Новая
       20

Представление и перезагрузка пользовательских маркеров Google Maps соответственно

1 голос
/ 30 июня 2019

Я не уверен, что это я делаю что-то или что-то фундаментальное, что требует объяснения. По сути, я занимаюсь обновлением маркеров на приведенной ниже карте, которые включаются в массив после нажатия кнопки (идентификатор элемента кнопки «reloadMarkers»)

Я получаю следующие ошибки в консоли: TypeError: Невозможно прочитать свойство 'length' из неопределенного в setMarkers в initMap

Кроме того, маркеры, которые я определяю, на самом деле не отображаются на карте?

Я думаю, что это что-то простое, что я делаю неправильно, но я не вижу других подобных вопросов, касающихся настраиваемых маркеров, подобных этому, и я относительно новичок в Google Maps API / javascript, так что, возможно, это я проблема?

Код ниже - то, что я использую: 

<script id="mapMarkerPositions">

    var example = {
        info: '<strong>Shepherds Bush Market</strong><br>',
        lat: 51.502500,
        lng: -0.226495,
        type: 'info',
        label: {
            text: '£00.00',
            fontFamily: "Courier, Arial, Helvetica, sans-serif",
        }
    };

    var example2 = {
        info: '<strong>186 uxbridge</strong><br>',
        lat: 51.505333,
        lng: -0.225528,
        type: 'info',
        label: {
            text: '£00.00',
            fontFamily: "Courier, Arial, Helvetica, sans-serif",
        }
    };

    var map;
    var markers = [];
    var merchantMarkers = [
        [example.info, example.lat, example.lng, example.type, example.label, 1],
        [example2.info, example2.lat, example2.lng, example2.type, example2.label, 2]
    ];

    var icons = {
            icon: {
                path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
                fillColor: '#fff',
                fillOpacity: 1,
                scale: 0.3,
                strokeColor: '#555',
                strokeWeight: 2,
                labelOrigin: new google.maps.Point(-120, -46)
            }
        };
</script>

Настройка карты (сразу после вышеуказанного скрипта): 

<script>

    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
            maxZoom: 20,
            minZoom: 14,
            zoom: 16,
            mapTypeControl: false,
            streetViewControl: false,
            center: {
                lat: 51.507388,
                lng: -0.127734
            }

        });

        setMarkers(merchantMarkers);

        document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);

        var infowindow = new google.maps.InfoWindow({})

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(initialLocation);
            });
        }

    }
</script>

Настройка маркеров: 

<script>        

function setMarkers(locations) {

for (var i = 0; i < locations.length; i++) {
    var merchant = locations[i];
    var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(merchant[i][1], merchant[i][2]),
                map: map,
                icon: icons.icon,
                label: merchant[i][4]
    })

    google.maps.event.addListener(
                marker,
                'click',
                (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0])
                        infowindow.open(map, marker)
                    }
                })(marker, i)
            )
};

    markers.push(marker);
}

</script>

Функция перезагрузки маркеров при нажатии кнопки: 

<script>

function reloadMarkers() {

// Loop through markers and set map to null for each
for (var i=0; i<markers.length; i++) {

    markers[i].setMap(null);
}

// Reset the markers array
markers = [];

// Call set markers to re-add markers
setMarkers(merchantMarkers);
}

</script>

Минимальный пример: 

#map {
			height: 400px
		}
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0;">


</head>

<body>


	<script id="mapMarkerPositions">
		var example = {
			info: '<strong>Shepherds Bush Market</strong><br>',
			lat: 51.502500,
			lng: -0.226495,
			type: 'info',
			label: {
				text: '£00.00',
				fontFamily: "Courier, Arial, Helvetica, sans-serif",
			}
		};

		var example2 = {
			info: '<strong>186 uxbridge</strong><br>',
			lat: 51.505333,
			lng: -0.225528,
			type: 'info',
			label: {
				text: '£00.00',
				fontFamily: "Courier, Arial, Helvetica, sans-serif",
			}
		};

		var map;
		var markers = [];
		var merchantMarkers = [
			[example.info, example.lat, example.lng, example.type, example.label, 1],
			[example2.info, example2.lat, example2.lng, example2.type, example2.label, 2]
		];

		var icons = {
			icon: {
				path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
				fillColor: '#fff',
				fillOpacity: 1,
				scale: 0.3,
				strokeColor: '#555',
				strokeWeight: 2,
				labelOrigin: new google.maps.Point(-120, -46)
			}
		};
	</script>

	<script>
		function initMap() {

			var map = new google.maps.Map(document.getElementById('map'), {
				maxZoom: 20,
				minZoom: 14,
				zoom: 16,
				mapTypeControl: false,
				streetViewControl: false,
				center: {
					lat: 51.507388,
					lng: -0.127734
				}

			});

			setMarkers(merchantMarkers);

			document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);

			var infowindow = new google.maps.InfoWindow({})

			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(function(position) {
					initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
					map.setCenter(initialLocation);
				});
			}

		}
	</script>

	<script>
		function setMarkers(locations) {

			for (var i = 0; i < locations.length; i++) {
				var merchant = locations[i];
				var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(merchant[i][1], merchant[i][2]),
					map: map,
					icon: icons.icon,
					label: merchant[i][4]
				})

				google.maps.event.addListener(
					marker,
					'click',
					(function(marker, i) {
						return function() {
							infowindow.setContent(locations[i][0])
							infowindow.open(map, marker)
						}
					})(marker, i)
				)
			};

			markers.push(marker);
		}
	</script>

	<script>
		function reloadMarkers() {

			// Loop through markers and set map to null for each
			for (var i = 0; i < markers.length; i++) {

				markers[i].setMap(null);
			}

			// Reset the markers array
			markers = [];

			// Call set markers to re-add markers
			setMarkers(merchantMarkers);
		}
	</script>

	<div id="map"></div>
	<input type="button" value="Reload markers" id="reloadMarkers">

	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBGFYRuVSrhZlIOuQn5BWhNNkggcssFFM&callback=initMap"></script>

</body>

</html>

1 Ответ

0 голосов
/ 01 июля 2019

Проблемы:

  1. Uncaught ReferenceError: google is not defined в этой строке: labelOrigin: new google.maps.Point(-120, -46) в определении icons, которое выполняется до загрузки API.Это должно быть внутри функции initMap, которая запускается после загрузки API.

  2. Uncaught (in promise) TypeError: Cannot read property 'icon' of undefined из-за вышеуказанной ошибки.

  3. markers.push(marker); находится не в том месте (он находится вне цикла, в котором создаются маркеры, поэтому применяется только к последнему созданному маркеру).Переместите его внутрь цикла.

screenshot of resulting map

фрагмент рабочего кода: 

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map {
  height: 90%;
}
<script id="mapMarkerPositions">
  var example = {
    info: '<strong>Shepherds Bush Market</strong><br>',
    lat: 51.502500,
    lng: -0.226495,
    type: 'info',
    label: {
      text: '£00.00',
      fontFamily: "Courier, Arial, Helvetica, sans-serif",
    }
  };

  var example2 = {
    info: '<strong>186 uxbridge</strong><br>',
    lat: 51.505333,
    lng: -0.225528,
    type: 'info',
    label: {
      text: '£00.00',
      fontFamily: "Courier, Arial, Helvetica, sans-serif",
    }
  };

  var map;
  var markers = [];
  var merchantMarkers = [
    [example.info, example.lat, example.lng, example.type, example.label, 1],
    [example2.info, example2.lat, example2.lng, example2.type, example2.label, 2]
  ];

  var icons
</script>

<script>
  function initMap() {
    icons = {
      icon: {
        path: ' M-240 -70 Q -240 -90 -220 -90 L -20 -90 Q 0 -90 0 -70 L 0 -20 Q 0 0 -20 0 L -220 0 Q -240 0 -240 -20 Z',
        fillColor: '#fff',
        fillOpacity: 1,
        scale: 0.3,
        strokeColor: '#555',
        strokeWeight: 2,
        labelOrigin: new google.maps.Point(-120, -46)
      }
    };
    map = new google.maps.Map(document.getElementById('map'), {
      maxZoom: 20,
      minZoom: 14,
      zoom: 16,
      mapTypeControl: false,
      streetViewControl: false,
      center: {
        lat: 51.507388,
        lng: -0.127734
      }
    });

    setMarkers(merchantMarkers);

    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
    document.getElementById('centerOnMarkers').addEventListener('click', centerOnMarkers);
    var infowindow = new google.maps.InfoWindow({})

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(initialLocation);
      });
    }

  }
</script>

<script>
  function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
      var merchant = locations[i];
      var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: icons.icon,
        label: merchant[4]
      })

      google.maps.event.addListener(
        marker,
        'click',
        (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0])
            infowindow.open(map, marker)
          }
        })(marker, i))
        markers.push(marker);
    };
  }
</script>

<script>
  function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    setMarkers(merchantMarkers);
  }
</script>
<script>
  function centerOnMarkers() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    map.fitBounds(bounds);
  }
</script>
<div id="map"></div>
<input type="button" value="Reload markers" id="reloadMarkers" />
<input type="button" id="centerOnMarkers" value="center on markers" />

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
...