Google 标记点击事件无效，但地图点击事件有效

Question

我正在尝试使用 google 地图 javascript api 在地图上制作可点击的标记。当我单击标记时，什么也没有发生。但是，当我将点击事件设置为地图而不是标记时，我可以点击任何地方，控制台将记录 "Click" 并且信息 window 将在标记处弹出。标记和地图都在范围内的同一点声明，所以我无法弄清楚为什么一个有效而另一个无效。这是我现在的代码：

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();
        });

Answer 1

尝试将事件参数传递给您的函数。

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

Answer 2

地理定位服务是异步的。在创建标记之前，您是 "adding" 标记的侦听器。在创建标记时将侦听器添加到标记（或使用 "createMarker" 函数创建标记并向其添加点击侦听器）。

proof of concept fiddle

代码片段：

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>

Google 标记点击事件无效，但地图点击事件有效

Google Marker Click Event Not Working But Map Click Event Is

javascript

google-maps

addeventlistener

google-maps-api-3