Событие клика Google Marker не работает, но событие клика карты - PullRequest
Новая
       22

Событие клика Google Marker не работает, но событие клика карты

0 голосов
/ 03 июня 2019

Я пытаюсь сделать кликабельный маркер на карте с помощью Google Maps Javascript API.Когда я нажимаю на маркер, ничего не происходит.Однако, когда я устанавливаю событие щелчка на карту вместо маркера, я могу щелкнуть где угодно, и консоль выдаст сообщение «Щелчок», и у маркера появится всплывающее окно с информацией.И маркер, и карта объявлены в одной и той же области видимости, так что почему один работает, а другой нет, я не могу понять.Вот мой код прямо сейчас: 

window.onload = function() {
        var marker = new google.maps.Marker({ animation: google.maps.Animation.DROP });
        var infoWindow = new google.maps.InfoWindow();
        var pos;
        // The location of Uluru
        var uluru = { lat: 43.221009, lng: -79.865291 };
        // The map, centered at Uluru
        var map = new google.maps.Map(
            document.getElementById('map'), { zoom: 12, center: uluru });
        // The marker, positioned at Uluru

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                marker = new google.maps.Marker({ position: pos, map: map });                
                map.setCenter(pos);
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
                marker = new google.maps.Marker({ position: uluru, map: map });
            });
        }
        else {
            marker = new google.maps.Marker({ position: uluru, map: map });             
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        } 

        marker.addListener('click', function (){
            showInfoWindow();
        });
        function showInfoWindow() {
            console.log("Click");
            infoWindow.setPosition(pos);
            infoWindow.setContent('Your Location');
            infoWindow.open(map);
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Error: The Geolocation service failed.' :
            'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
        }     

    };

Я также пытался сделать слушатель следующим образом: 

        google.maps.event.addDomListener(marker, 'click', function (){
            showInfoWindow();
        });

Ответы [ 2 ]

3 голосов
/ 04 июня 2019

Служба геолокации является асинхронной. Вы «добавляете» слушателя к маркеру до того, как он был создан. Добавьте прослушиватель к маркеру при его создании (или используйте функцию «createMarker», которая создает маркер и добавляет к нему прослушиватель кликов).

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

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

window.onload = function() {
  var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP
  });
  var infoWindow = new google.maps.InfoWindow();
  var pos;
  // The location of Uluru
  var uluru = {
    lat: 43.221009,
    lng: -79.865291
  };
  // The map, centered at Uluru
  var map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 12,
      center: uluru
    });
  // The marker, positioned at Uluru

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      marker = new google.maps.Marker({
        position: pos,
        map: map
      });
      marker.addListener('click', function() {
        showInfoWindow();
      });
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
      marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
    });
  } else {
    marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
    marker.addListener('click', function() {
      showInfoWindow();
    });
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

  function showInfoWindow() {
    console.log("Click");
    infoWindow.setPosition(pos);
    infoWindow.setContent('Your Location');
    infoWindow.open(map);
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
      'Error: The Geolocation service failed.' :
      'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
  }
};
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
0 голосов
/ 03 июня 2019

попробуйте передать параметр события в вашу функцию. 

 `marker.addListener('click', function (event){` 
   if (event) {
      showInfoWindow();
   }     
  });
...