如何从数组中选择特定标记

How can I select a specific marker from my array?

本文关键字：选择 数组      更新时间：2023-09-26

我在这里发现了一些接近我的问题：存储谷歌地图标记并从中选择一个特定的标记

然而，我已经认真研究了那里的代码，只是不太清楚如何将其实现到我的代码中。这是我所拥有的：

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

此代码在initialize函数中。

我把这段代码放在函数外的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;
  };

尽管我更喜欢直接选择标记，但我还是选择了以下代码：

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

我认为，由于标记已经有了一个监听器，所以添加另一个监听器可能无论如何都不会起作用

如果您只想在单击标记时执行某些操作，则不需要属性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]中有Marker2。

一个琐碎的初始化函数。请注意，您通过调用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);

现在显示Markers功能：

// 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);
   });
}
相关文章：