Question

我正在尝试使用谷歌地图和标记设置一个小程序。我已经尝试了一段时间在选中的标记上触发click事件，但我没有成功。我的想法我想要实现：在谷歌地图上我可以设置几个标记（这有效！）。然后，如果我点击我设置的标记，我想获得特定点击标记的点击事件，我无法得到它。

我只在设置的第一个标记上获取click事件，但不在我在地图上手动单击的标记上获取。你能告诉我我做错了什么吗？

// Check to see if the browser supports the GeoLocation API.
if (navigator.geolocation) {

var markers = [];

// Get the location
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showMap(lat, lon);
});


} else {
  // Print out a message to the user.
  document.write('Your browser does not support GeoLocation');
}


// Show the user's position on a Google map.
function showMap(lat, lon) {
// Create a LatLng object with the GPS coordinates.
var myLatLng = new google.maps.LatLng(lat, lon);

// Create the Map Options
var mapOptions = {
  zoom: 8,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Generate the Map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

var myLatLng = new google.maps.LatLng(lat, lon);
// Add a Marker to the Map
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  draggable:true,
  title: 'Found you!'
});


  map.addListener( 'click', function(e) {
      console.log("ASD");
   var latitude = e.latLng.lat();
    var longitude = e.latLng.lng();
    console.log( latitude + ', ' + longitude );
    for (var i = 0; i < markers.length; i++) {
          console.log("i : " + i + " " + marker.getPosition());
        }
    placeMarker(e.latLng, map);
  });

  function placeMarker(position, map) {
     marker = new google.maps.Marker({
      position: position,
      map: map
    });  
    console.log("M POS " + marker.getPosition());
    markers.push(marker);
  console.log("QQQQ  " + marker.getPosition());
    //map.panTo(position);
  }

        map.addListener( 'rightclick', function(e) {
            console.log("SSSS");
    clearMarkers();
  });

    marker.addListener('click', function() {
        console.log("MARKER!!");
                  var infowindow = new google.maps.InfoWindow({
      content:"Hello World!"
    });
  infowindow.open(map,marker);
        });



  }

  function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

  function clearMarkers() {
        setMapOnAll(null);
      }

Answer 1

当您对用户的位置进行地理定位时，看起来只为您放置在地图上的第一个标记设置了onclick事件。这就是为什么infowindow只显示第一个标记。我修改了你的代码，并为placeMarker函数中的click事件添加了相同的逻辑。我相信它现在有你想要的行为。我将向您展示我在函数中添加的代码：

function placeMarker(position, map) {
 marker = new google.maps.Marker({
  position: position,
  map: map
});

marker.addListener('click', function() {                                  
    console.log("MARKER!!");                                              
    var infowindow = new google.maps.InfoWindow({                
        content:"Hello World!"                                                  
    });                                                                       
        infowindow.open(map,marker);                                                
    });                                                                   

console.log("M POS " + marker.getPosition());
markers.push(marker);
console.log("QQQQ  " + marker.getPosition());
//map.panTo(position);
}

我还有一个JSFiddle来证明这一点，请注意我为了安全起见而修改了我的API密钥，因此您需要输入自己的API才能使用此示例：

https://jsfiddle.net/kxxhvzL0/

我希望这有帮助！

谷歌地图：getSelected标记

1 个答案: