Объединить два обработчика событий в один?

Question

Объединить два обработчика событий в один?

1

Вот мой код карты Google, на странице есть карта google с маркерами и таблицей со всеми маркерами местоположений, которые находятся под картой.

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> который очень похож, есть способ как-то объединить их в один обработчик событий?

Roman Toasov 16 июль 2017, в 04:31

Источник

Теги:

javascript

google-maps

google-maps-api-3

1 ответ

Ещё вопросы

xomena · Answer 1 · 2017-07-18T13-45-00.000Z

Не уверен, что можно объединить эти два обработчика событий в один, но вы можете легко избежать дублирования кода, если второй обработчик событий запускает событие click для соответствующего маркера. Что-то похожее

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>

Надеюсь, это поможет!