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!")
    });

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

我甚至尝试给一个额外的变量赋予与[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]中有Marker 1，在markersData [1]中有Marker 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);

   });
}

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

2 个答案: