javascript - 将两个事件处理程序合并为一个？

Question

这是我的谷歌地图代码，页面有带有标记的谷歌地图和带有所有位置标记的表格，用于下面的 map 。

var locations = [];

locations.push($key = [33.8202404, -118.3010964, "House One", "Description ...");
locations.push($key = [33.9283115, -118.2940694, "House Two", "Description ...");
locations.push($key = [33.9221547, -118.3076608, "House Three", "Description ...");

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

var markers = [];

for (i = 0; i < locations.length; i++) {

    markers[i] = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        icon: "http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.55|0|6b90ff|12.5|_|" + (i+1),
        title: locations[i][2]
    });

    pano_marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: panorama,
        icon: "http://chart.apis.google.com/chart?chst=d_map_spin&chld=2.5|0|6b90ff|55|_|" + (i+1)
    });

    google.maps.event.addListener(markers[i], 'click', (function(marker, i) {
        return function() {

            map.panTo(this.getPosition());

            infowindow.setContent(locations[i][3]);
            infowindow.open(map, marker);

            getPanoramaInfo({location: this.getPosition(), radius: 50});

        }

    })(markers[i], i));


    //ALMOST DUPLICATE CODE, IS THERE WAY TO NOT REPEAT IT TWICE?

    document.getElementById("table_marker[" + i + "]").addEventListener('click', function() {

            index = this.id.substring(7,8);

            map.panTo(markers[index].position);

            infowindow.setContent(locations[index][3]);
            infowindow.open(map, markers[this.id.substring(7,8)]);

            getPanoramaInfo({location: markers[index].position, radius: 50});

    });

}

当我点击<div>时它的工作原理就像单击 map 上的标记一样。

<div id="table_marker[0]">House One</div>
<div id="table_marker[1]">House Two</div>
<div id="table_marker[2]">House Three</div>

基本上我有两个事件处理程序，一个用于 map 标记，另一个用于 <div>非常相似，有没有办法以某种方式将它们组合成一个事件处理程序？

Answer 1

不确定是否可以将这两个事件处理程序合并为一个，但如果第二个事件处理程序仅触发相应标记的单击事件，则可以轻松避免重复的代码。类似的东西

document.getElementById("table_marker[" + i + "]").addEventListener('click', function() {
    index = this.id.substring(7,8);
    google.maps.event.trigger(markers[index], 'click');
});

概念证明:

var map, infowindow;
      
var locations = [];
var markers = [];

locations.push([33.8202404, -118.3010964, "House One", "Description 1 ..."]);
locations.push([33.9283115, -118.2940694, "House Two", "Description 2 ..."]);
locations.push([33.9221547, -118.3076608, "House Three", "Description 3 ..."]);

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 33.9283115, lng: -118.2940694},
    zoom: 10
  });

  infowindow = new google.maps.InfoWindow();

  locations.forEach(function (loc, i) {
      markers[i] = new google.maps.Marker({
          position: new google.maps.LatLng(loc[0], loc[1]),
          map: map,
          icon: "http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.55|0|6b90ff|12.5|_|" + (i+1),
          title: loc[2]
      });

      (function(marker,i, content){
          google.maps.event.addListener(marker, 'click', function(ev) {
              map.panTo(marker.getPosition());
              infowindow.setContent(content);
              infowindow.open(map, marker);
          });

          document.getElementById("table_marker[" + i + "]").addEventListener('click', function() {
              google.maps.event.trigger(marker, 'click');
          });
      })(markers[i], i, loc[3]);
  });
}

#map {
  height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<div id="table_marker[0]" style="cursor:pointer;">House One</div>
<div id="table_marker[1]" style="cursor:pointer;">House Two</div>
<div id="table_marker[2]" style="cursor:pointer;">House Three</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>

希望这会有所帮助!