Javascript для цикла в Google Maps - PullRequest
Новая
       11

Javascript для цикла в Google Maps

0 голосов
/ 04 сентября 2018

Я создал карту, содержащую пару маркеров, и когда пользователь нажимает на маркеры, он открывает всплывающую страницу. Это будет нормально работать, когда у меня будет 5 маркеров, но сейчас я должен внедрить ~ 400 маркеров. Поэтому я хотел бы использовать цикл for для этого. Но почему-то маркеры не появятся на карте. Это не даст никаких ошибок.

Вот мой код: 

let allMarkerOpts = [
    {
        finalLat: '35.6695585',
        finalLng: '139.7611172',
        iconUrl: 'hotelMarker.png',
        locationName: 'openGinza();'
    },

    {
        finalLat: '35.6961571',
        finalLng: '139.7547658',
        iconUrl: 'restaurantMarker.png',
        locationName: 'openKanda();'
    },

    {
        finalLat: '35.7058408',
        finalLng: '139.7407026',
        iconUrl: 'hotelMarker.png',
        locationName: 'openDome();'
    },

    {
        finalLat: '35.7012901',
        finalLng: '139.7368178',
        iconUrl: 'coffeehouseMarker.png',
        locationName: 'openKagurazaka();'
    },
];

    for ( var i; i < 5; i++ ) {
        (function(){
            let markerOptions = {
                map: map,
                position: {
                    lat: allMarkerOpts[i].finalLat,
                    lng: allMarkerOpts[i].finalLng
                }
            };

            markerOptions.icon = {
                url: "https://sitename.com/demo/img/destinations/markers/" + allMarkerOpts[i].iconUrl,
                scaledSize: new google.maps.Size(
                    52,
                    57),
                size: new google.maps.Size(
                    52,
                    57),
                anchor: new google.maps.Point(
                    26,
                    57)
            };

            let marker = new google.maps.Marker(markerOptions);



            google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
                allMarkerOpts[i].locationName
            }
            })(marker));
        })();
    };

1 Ответ

0 голосов
/ 04 сентября 2018

У вас есть две проблемы с опубликованным кодом:

  1. Ваш цикл не имеет допустимого начального значения: 
 for ( var i; i < 5; i++ ) {

должно быть: 

for ( var i=0; i < 5; i++ ) {
  1. ваши значения широты и долготы являются строками, а не числами. Я получаю ошибку JavaScript: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number. Один из вариантов - использовать parseFloat, чтобы сделать их числами: 
let markerOptions = {
    map: map,
    position: {
        lat: parseFloat(allMarkerOpts[i].finalLat),
        lng: parseFloat(allMarkerOpts[i].finalLng)
    }
};

подтверждение концепции скрипки

screenshot of resulting map

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

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  for (var i = 0; i < allMarkerOpts.length; i++) {
    (function() {
      let markerOptions = {
        map: map,
        position: {
          lat: parseFloat(allMarkerOpts[i].finalLat),
          lng: parseFloat(allMarkerOpts[i].finalLng)
        }
      };
      let marker = new google.maps.Marker(markerOptions);
      bounds.extend(marker.getPosition());


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(allMarkerOpts[i].locationName);
          infowindow.open(map, marker);
        }
      })(marker, i));
    })();
  };
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
let allMarkerOpts = [{
    finalLat: '35.6695585',
    finalLng: '139.7611172',
    iconUrl: 'hotelMarker.png',
    locationName: 'openGinza();'
  },

  {
    finalLat: '35.6961571',
    finalLng: '139.7547658',
    iconUrl: 'restaurantMarker.png',
    locationName: 'openKanda();'
  },

  {
    finalLat: '35.7058408',
    finalLng: '139.7407026',
    iconUrl: 'hotelMarker.png',
    locationName: 'openDome();'
  },

  {
    finalLat: '35.7012901',
    finalLng: '139.7368178',
    iconUrl: 'coffeehouseMarker.png',
    locationName: 'openKagurazaka();'
  },
];
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
...