將兩個事件處理程序合併爲一個？

Question

這是我的谷歌地圖代碼，頁面有谷歌地圖與標記和表與所有位置標記是地圖下的地圖。

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>點擊它可以作爲點擊標記在地圖上。

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

基本上我有兩個事件處理一個其他的<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>

我希望這有助於！