Question

我正在尝试使用Google Maps JavaScript API在地图上创建可点击的标记。当我单击标记时，没有任何反应。但是，当我将click事件设置为地图而不是标记时，我可以单击任意位置，控制台将记录“ Click”，并且信息窗口将在标记处弹出。标记和地图都在作用域中的同一点声明，因此我无法弄清楚为什么一个有效而另一个无效。现在是我的代码：

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

地理位置服务是异步的。您正在将侦听器“添加”到标记，然后再创建它。创建侦听器时，将其添加到标记中（或使用创建标记并将点击侦听器添加到其中的“ 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>

Answer 2

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

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

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

2 个答案: