Javascript-触发1个eventListener后执行2个函数

Question

我正在制作一个类似googleMaps的应用程序，并且在单击应用程序中的图像时，我需要它执行两个功能。 第一个函数显示带有对象名称的内容字符串，第二个函数显示从用户当前位置到单击的对象的方向。

// Creating separate markers and locations
    // King Tuts
    var tutsImg = "kingTutsIcon.jpg";
    var kingTuts = new google.maps.LatLng(55.86256, -4.265);
    var tutsDisplay = new google.maps.Marker({
    position: kingTuts,
    map: map,
    icon: tutsImg,
    title:"King Tut's Wah Wah Hut"
    });

    var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">King Tuts Wah Wah Hut</h2>'+
    '<div id="bodyContent">'+
    '</div>'+
    '</div>';

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


    // Creating directions

    function calcRoute () {
            var request = {
            origin: marker, 
            destination: kingTuts,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
         }

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {

            directionsDisplay.setDirections(response);
            }
        });
        }

    google.maps.event.addListener(tutsDisplay, 'click', function() {
         infowindow.open(map,tutsDisplay);

    });

    google.maps.event.addListener(tutsDisplay, 'click', function() {
         infowindow.open(map,calcRoute);

    });

这是用于创建在两个函数中使用的不同变量的代码。 但是，该应用程序仅执行第一个功能（名称显示），而没有显示执行第二个功能后要显示的方向。

请大家帮忙，我真的在这里很困惑

Answer 1

google.maps.InfoWindow.open具有两个参数：

open(map?:Map|StreetViewPanorama, anchor?:MVCObject) | None | Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

calcRoute是一个函数，而不是MVCObject，不确定您期望发生的事情。

google.maps.event.addListener(tutsDisplay, 'click', function() {
     infowindow.open(map,calcRoute);

});

Answer 2

引用https://developers.google.com/maps/documentation/javascript/directions

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: haight
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

根据上面的示例..您需要初始化这些对象

directionsService = new google.maps.DirectionServices()
directionsDisplay = new google.maps.DirectionsRenderer()

..将地图加载到页面中之后。.您需要执行以下方法。

directionsDisplay.setMap(map)

在您的示例中..替换以下内容

google.maps.event.addListener(tutsDisplay, 'click', function() {
         infowindow.open(map,tutsDisplay);

    });

与

google.maps.event.addListener(tutsDisplay, 'click', function() {
         directionsDisplay.setMap(map)
         infowindow.open(map,tutsDisplay);
         calcRoute();    
    });

并删除多余的google.maps.event.addListener声明/分配。