如何从我的阵列中选择特定标记？

Question

我在这里找到了与我的问题很接近的东西：Storing Google Map Markers and Selecting a specific marker from it

但是，我已经认真研究了那里的代码，但我无法完全弄清楚如何在我的代码中实现它。这是我所拥有的：

var t = {
    name:"sdf",
    lat:123,
    lng:-123,
    address:"asd",
  link:"http://www.google.com"
  };

  a[0] = t;

  var t = {
    name:"sdf",
    lat:123,
    lng:-123,
    address:"asd",
    link:"http://www.google.com"
  };

  a[1] = t;

for (var i = 0; i < a.length; i++) {
        var latlng = new google.maps.LatLng(a[i].lat,a[i].lng);
        map.addMarker(createMarker(a[i].name,latlng,a[i].address,a[i].link));
     };

这段代码在初始化函数中。

我将这段代码放在 dom 监听器之后的函数之外进行初始化：

    google.maps.event.addListener(marker[[a[0]], "click",function(){
      alert("worked!")
    });

问题是，我需要能够选择一个特定的标记来做一些与其他标记不同的事情。

我什至尝试为附加变量提供与 a[0] 相同的值，就像他们在链接中所做的那样。但是将该变量放在标记括号中也不起作用。

这是创建标记的代码：

function createMarker(name,latlng,address,link) {
    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content:"<div class='buildingInfo'>" + name + "<br>" + "<a href='" + link + "'>" + address +"</a>" + "</div>"});
      infowindow.open(map, marker);
    });
    return marker;

  };

Answer 1

尽管我更愿意直接选择标记，但我选择了以下代码：

function createMarker(name,latlng,address,link) {
    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if(name == "name"){
        alert("worked!");
      }
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content:"<div class='buildingInfo'>" + name + "<br>" + "<a href='" + link + "'>" + address +"</a>" + "</div>"});
      infowindow.open(map, marker);
    });
    return marker;

  };

我认为由于标记已经有一个监听器，因此向它添加另一个监听器可能无论如何都行不通。

Answer 2

如果您只想在单击标记时执行某项操作，则无需指定 ID。您只需在创建标记时将侦听器链接到标记。

您将标记数据存储在对象数组中...

var markersData = [
  {
      lat: 40.6386333,
      lng: -8.745,
      name: "Marker 1"
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Marker 2"
   }
];

现在，markersData[0] 中有标记 1，markersData[1] 中有标记 2。

一个简单的初始化函数。请注意，您通过调用 displayMarkers() 开始创建标记。

function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // displayMarkers() function is called to begin the markers creation
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

现在是 displayMarkers 函数：

// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds and zoom level according to markers position
   var bounds = new google.maps.LatLngBounds();

   // For loop that runs through the info on markersData making
   // it possible to createMarker function to create the markers
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;

      createMarker(latlng, name);

      // Marker’s Lat. and Lng. values are added to bounds variable
      bounds.extend(latlng); 
   }

   // Finally the bounds variable is used to set the map bounds
   // with API’s fitBounds() function
   map.fitBounds(bounds);
}

最后是 createMarkers 函数，您可以在其中设置侦听器以执行您希望它执行的任何操作

// This function creates markers (one at a time) and sets a listener to each marker
function createMarker(latlng, name){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng
   });

   // THIS IS WHAT YOU WANT...
   // This event expects a click on a marker
   // When this event is fired it opens the alert message
   google.maps.event.addListener(marker, 'click', function() {

      alert("worked! This is marker: " + name);

   });
}