Блог

Главная - Вопросы по программированию - Maps JavaScript Api: как поместить информационное поле на каждый динамически созданный маркер с названием места, а маркер устанавливается с помощью setTimeout()?

Maps JavaScript Api: как поместить информационное поле на каждый динамически созданный маркер с названием места, а маркер устанавливается с помощью setTimeout()?

#javascript #google-maps #google-cloud-platform #google-maps-markers

# #javascript #google-maps #google-cloud-platform #google-maps-markers

Вопрос:

У меня есть проект JS Api Google Maps, в котором он должен возвращать ближайшую аптеку с позиции пользователя, радиус 2000 м. Возвращенные местоположения аптек настроены так, чтобы они отображались на карте с интервалом в 200 мс друг от друга, чтобы местоположения не выпадали одновременно. Пока все в порядке, но когда я попытался вернуть некоторую информацию о местоположении при нажатии на маркер, с информацией сохраняется только одно местоположение.

 <script>
        var marker;
        let iconBase = "https://developers.google.com/maps/documentation/javascript/examples/full/images/";
        var userPosition;

        $(document).ready(function () {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(function (p) {
                    showUserDetails(p.coords.latitude, p.coords.longitude);
                    initialize();
                }, function (e) {
                    ipLookup();
                });
            } else
                ipLookup();
        });

        function showUserDetails(latitude, longitude, additional) {
            userPosition = {
                lat: latitude,
                lng: longitude
            };
            // userPositionString = latitude   ","   longitude;

            $("#latitude").text(latitude);
            $("#longitude").text(longitude);

            if (typeof additional != "undefined") {
                $("#country").text(additional.country.name);
                $("#city").text(additional.city.name);
                $("#continent").text(additional.continent.name);
            }
        }


        let map;
        let service;
        let infowindow;
        function initialize() {
            infowindow = new google.maps.InfoWindow();
            //Map options
            var options = {
                center: userPosition,
                zoom: 14,
                // disableDefaultUI: true,
            }
            //New map
            map = new
                google.maps.Map(document.getElementById("map"), options);

            var request = {
                location: userPosition,
                radius: '2000',
                query: 'farmacie,spital',
            };

            service = new google.maps.places.PlacesService(map);
            service.textSearch(request, callback);;

            function addUserLocationMarker() {
                marker = new google.maps.Marker({
                    map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: userPosition,
                    icon: "http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png"
                });

                marker.addListener("click", toggleBounce);
                var infoWindow = new google.maps.InfoWindow({
                    content: "<h3>Locatia mea ! 🙂</h3>"
                });
                marker.addListener('click', function () {
                    infoWindow.open(map, marker);
                });
            }
            addUserLocationMarker();
        }

        let neighborhoods = [];

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i  ) {
                    var place = results[i];
                    // createMarker(results[i]);
                    neighborhoods = results;
                    drop();
                }
            }
        }

        let markers = [];

        function drop() {

            clearMarkers();

            for (let i = 0; i < neighborhoods.length; i  ) {
                addMarkerWithTimeout(neighborhoods[i], i * 200);

            }
        }

        function addMarkerWithTimeout(position, timeout) {
            window.setTimeout(() => {
                markers.push(
                   marker = new google.maps.Marker({
                       map,
                        position: position.geometry.location,
                        animation: google.maps.Animation.DROP,

                    }, 
                    ));
                    google.maps.event.addListener(marker, "click", () => {
                    infowindow.setContent('<h2>'  place.name   '</h2>');
                    infowindow.open(map, marker);
                }),
                    marker.addListener("click", toggleBounce)
            }, timeout);
        }

        function addTextBoxInfo(marker) {

        }

        function clearMarkers() {
            for (let i = 0; i < markers.length; i  ) {
                markers[i].setMap(null);
            }
            markers = [];
        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        function ipLookup() {
            $.get('https://api.userinfo.io/userinfos', function (r) {
                showUserDetails(r.position.latitude, r.position.longitude, r);
            });
        }
    </script>
    ```
    ```
     <script defer
        src="https://maps.googleapis.com/maps/api/js?key=API_KEYamp;libraries=geometry,placesamp;q=farmacieamp;callback=initMap">
      </script>
    ```

Ответ №1:

Я получаю ошибку javascript с опубликованным кодом : Uncaught ReferenceError: place is not defined . У вас опечатка в вашей addMarkerWithTimeout функции. position действительно place . Лучше всего назвать аргумент функции так, чтобы это имело смысл:

 function addMarkerWithTimeout(place, timeout) {
  window.setTimeout(() => {
    var marker = new google.maps.Marker({
      map,
      position: place.geometry.location,
      animation: google.maps.Animation.DROP,

    });
    google.maps.event.addListener(marker, "click", () => {
        infowindow.setContent('<h2>'   place.name   '</h2>');
        infowindow.open(map, marker);
      }),
      marker.addListener("click", toggleBounce);
    markers.push(marker);
  }, timeout);
}

назовите это так:

 function drop(neighborhoods) {

  clearMarkers();

  for (let i = 0; i < neighborhoods.length; i  ) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);

  }
}

Передача ответа от службы размещения в drop функцию:

 function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i  ) {
      var place = results[i];
      // createMarker(results[i]);
      drop(results);
    }
  }
}

доказательство концепции скрипки

скриншот карты с открытым информационным окном

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

 let map;
let service;
let infowindow;
let userPosition = {
  lat: 40.7127753,
  lng: -74.0059728
}

function initialize() {
  infowindow = new google.maps.InfoWindow();
  //Map options
  var options = {
    center: userPosition,
    zoom: 15,
    // disableDefaultUI: true,
  }
  //New map
  map = new
  google.maps.Map(document.getElementById("map"), options);

  var request = {
    location: userPosition,
    radius: '2000',
    query: 'pharmacy',
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);;

  function addUserLocationMarker() {
    marker = new google.maps.Marker({
      map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      position: userPosition,
      icon: "http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png"
    });

    marker.addListener("click", toggleBounce);
    var infoWindow = new google.maps.InfoWindow({
      content: "<h3>Locatia mea ! 🙂</h3>"
    });
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
  addUserLocationMarker();
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i  ) {
      var place = results[i];
      // createMarker(results[i]);
      drop(results);
    }
  }
}

let markers = [];

function drop(neighborhoods) {

  clearMarkers();

  for (let i = 0; i < neighborhoods.length; i  ) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);

  }
}

function addMarkerWithTimeout(place, timeout) {
  window.setTimeout(() => {
    var marker = new google.maps.Marker({
      map,
      position: place.geometry.location,
      animation: google.maps.Animation.DROP,

    });
    google.maps.event.addListener(marker, "click", () => {
        infowindow.setContent('<h2>'   place.name   '</h2>');
        infowindow.open(map, marker);
      }),
      marker.addListener("click", toggleBounce);
    markers.push(marker);
  }, timeout);
}

function clearMarkers() {
  for (let i = 0; i < markers.length; i  ) {
    markers[i].setMap(null);
  }
  markers = [];
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
} 
 /* 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: 100%;
  margin: 0;
  padding: 0;
} 
 <!DOCTYPE html>
<html>

<head>
  <title>Place Searches</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initializeamp;libraries=placesamp;v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

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

</html>