单击多个谷歌地图标记的自定义功能

Question

我正在尝试为我循环的所有标记创建一个自定义函数。 问题（我认为）是我需要使用递增数字或其他东西来制作变量名称标记。 我的代码如下：

$(document).ready(function(){
initMap();
});

function testfunction(data){
    console.log(data);
}

function initMap() {
var myLatLng = {lat: -33.869490, lng: 151.201056};

var locations = [
  ['Bondi Beach', 'test', -33.890542, 151.274856, 4],
  ['Coogee Beach', 'test2222', -33.923036, 151.259052, 5]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: myLatLng
});

var marker, i;
for (i = 0; i < locations.length; i++) {  
    var marker[i] = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map,
        data : locations[i][1],
        title : locations[i][0],
    });
    console.log(marker[i].data); // <-- THIS WORKS
   marker[i].addListener('click', function() {
        console.log(marker[i].data); // <-- THIS DOES NOT WORK
       testfunction(marker.data);
    });  
}


}

编辑!!! - 改变测试功能（marker.data）; TO testfunction（marker [i] .data）;

这给出了一个错误：无法读取undefined的属性'数据'。

但是当我尝试在不使用eventlistener的情况下控制日志时，它确实有效！

Answer 1

这是工作的js，我希望你可以理解我的代码是如何工作的。 我已经为您的标记添加了额外信息，因此点击后您可以看到您点击了哪个制作者。 基本上不是创建具有索引和单击事件的单独制造商。 我在你的for循环中结合了两个作业。 另请参阅底部的标记控制台日志。 它表明使用for循环我们每次都创建了标记对象。

编辑： 小提琴的例子

var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));

        console.log(marker); // Object { __gm: Object, gm_accessors_: Object, position: Object, gm_bindings_: Object, map: Object, closure_uid_897990155: 16, clickable: true, visible: true, __e3_: Object }

    }

Answer 2

你可以使用clousure

  $(document).ready(function(){
  initMap();
  });

  function testfunction(data){
      console.log(data);
  }

  function initMap() {
  var myLatLng = {lat: -33.869490, lng: 151.201056};


      var locations = [
        ['Bondi Beach', 'test', -33.890542, 151.274856, 4],
        ['Coogee Beach', 'test2222', -33.923036, 151.259052, 5]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: myLatLng
      });

      // add a closure for listener manage
       var addListenerToMarker = function(myMarker){
          myMarker.addListener('click', function() {
             testfunction(myMarker.data);
          }); 
      }

      // use a collection of markers for future use (hide/show..etc)
      var markers = [];
      var i;
      var marker;
      for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][2], locations[i][3]),
              map: map,
              data : locations[i][1],
              title : locations[i][0],
          });

        //push the marker in collectio
        markers.push(marker);
        // call the clousure
        addListenerToMarker(marker);

      }


  }