[Google Maps markers-在infoWindow中单击自定义按钮时调用函数

Question

当用户在google.infowindow中单击我的自定义按钮时，我想调用一个函数，但是它不起作用。错误消息为“未定义calcRoute”。我试图在简单的标记单击上调用该函数，它可以完美运行。它不喜欢函数调用我在模板文字中输入的内容。

var map;
var userCoords = {lat: -33.898001 , lng: 151.090786};

function initMap() {

var markers = new Array();
var infoWindows = new Array();
    var bounds = new google.maps.LatLngBounds();
    var activeInfoWindow;
    var directionsService = new google.maps.DirectionsService();
    var directionsRenderer = new google.maps.DirectionsRenderer();

    var features = [
      {
        position: new google.maps.LatLng(-33.91721, 151.22630),
        type: 'person',
        title: "Xy",
        description: "asdasdasdasd",
        img: "xy.jpg",
        url: "xy"
      }, 
      {
    .
    .
    .
  }
];

    map = new google.maps.Map(
        document.getElementById('map'),{
            center: new google.maps.LatLng(-33.91721, 151.22630),
            zoom: 16,
    });


    directionsRenderer.setMap(map);
    directionsRenderer.setPanel(document.getElementById('directionsPanel'));


    function calcRoute(endPoint) {
      var start = userCoords;
      var end = endPoint;

      var request = {
        origin:start,
        destination:end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });

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

      markers[i] = new google.maps.Marker({
        position: features[i].position,
        icon: icons[features[i].type].icon,
        map: map
    });


    bounds.extend(features[i].position);
    map.fitBounds(bounds);

    infoWindows[i] = new google.maps.InfoWindow({
        content: `

            <div class="thumbnail-info-canvas">

                <div class="routeplan" id="route_plan" onclick="calcRoute(${features[i].position})">
                    <div class="route-icon-wrapper">
                        <img src="directions.png"/>
                    </div>
                </div>      

            </div>
      `
    });


    (function (i) {
        google.maps.event.addListener(markers[i], 'click', function () {
            if (activeInfoWindow){
                activeInfoWindow.close();
            }
            infoWindows[i].open(map, markers[i]);
             activeInfoWindow = infoWindows[i];
        });
    })(i);


}; // end of for          
} // end of initMap

[我也试图制作一个像点击按钮这样的自调用函数，但是它没有找到ID，并且我收到了错误消息-> addEventListener的值未定义

    (function (i) {
        var route = document.getElementById("route_plan");
        route.addEventListener("click", calcRoute(features[i].position), false);
    })(i);

我还试图将calcRoute函数放到initMap函数之外，并使其变为全局。我添加了正确的参数，看起来像这样：

function calcRoute(endPoint,directionsService,directionsRenderer) {
      var start = userCoords;
      var end = endPoint;

      var request = {
        origin:start,
        destination:end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }

和电话：

        infoWindows[i] = new google.maps.InfoWindow({
        content: `

            <div class="thumbnail-info-canvas" onclick="${features[i].position},${directionsService},${directionsRenderer}">

                <div class="routeplan" id="route_plan">
                    <div class="route-icon-wrapper">
                        <img src="directions.png"/>
                    </div>
                </div>

                <div class="img-wrapper">
                    <img src='${features[i].img}'>
                    <div class="thumbnail-foil"></div>
                </div>

                <div class="thumbnail-content">
                    <h1>${features[i].title}</h1>
                    <h2>${features[i].description}</h2>
                </div>


            </div>
      `
    });

结果：“意外标识符”错误-> calcRoute（（-33.931478，151.093704），[对象对象]，[对象对象]）；

我认为这是某种关闭问题。有什么主意吗？

Answer 1

我通过从initMap中创建一个函数找到了一半的解决方案，然后调用它。不幸的是，当我调用getDir（）时，它只给我坐标的后半部分，但是在h1中下面的相同语句中，格式很好。

function getDir（latlng）{

        initMap();

        var userCoords = new google.maps.LatLng(-33.8951972,151.0864157);

        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();

        directionsRenderer.setMap(map);
        directionsRenderer.setPanel(document.getElementById('directionsPanel'));


        var origin = userCoords;
        console.log("userCoords: " + userCoords);
        var end = latlng;
        console.log("destination: " + end);

      var request = {
        origin: origin,
        destination: end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }


    infoWindows[i] = new google.maps.InfoWindow({
        content: `

            <div class="thumbnail-info-canvas" id="thumbb">

                <div class="routeplan" id="route_plan" onclick="getDir(${features[i].position})">
                    <div class="route-icon-wrapper">
                        <img src="directions.png"/>
                    </div>
                </div>

                <div class="img-wrapper">
                    <img src='${features[i].img}'>
                    <div class="thumbnail-foil"></div>
                </div>

                <div class="thumbnail-content">
                    <h1>${features[i].title}, <!-- ${features[i].position} --></h1>
                    <h2>${features[i].description}</h2>
                </div>


            </div>
      `
    });