Meteor: Uncaught ReferenceError: calcRoute is not defined

Question

我是 Meteor 和 Javascript 的新手。我正在创建一张地图，它提供从您当前位置到地图上标记的方向。除了我似乎无法正确调用 calcRoute() 函数之外，一切似乎都正常。或者它可能是在错误的地方定义的。

我想我需要一些关于模板助手的学习。请告诉我哪里出错了。谢谢。

    var gmaps = {

    // map object
    map: null,

    //direction services object
    directionsService: null,

    //direction services object
    directionsDisplay: null,

    //direction services object
    stepDisplay: null,

    markerArray: []
} 
Template.map.helpers({
    mapOptions: function() {
        if (GoogleMaps.loaded()) {

            if (!Geolocation.error()) {                
                pos = Geolocation.latLng();
            } 
            return {
                //center: new google.maps.LatLng(-25.2743, 133.7751),
                center: new google.maps.LatLng(pos.lat, pos.lng),
                zoom: 12,
                scaleControl: false,                
                zoomControl: false,
                mapTypeControl: false,
                panControl: false,
                rotateControl: true,
                overviewMapControl: false, 
                streetViewControl: false,


            };
        }
    },

     calcRoute: function() {


        //clear markers before calculating function   
        gmaps.clearMarkers();    

        console.log(this.markerArray);
        // Retrieve the start and end locations and create
        // a DirectionsRequest using BICYCLING directions.
        var start = marker3.getPosition(); 
        var end = document.getElementById('marketName').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.BICYCLING
        };

        // Route the directions and pass the response to a
        // function to create markers for each step.
        this.directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
            var warnings = document.getElementById('warnings_panel');
            warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
            this.directionsDisplay.setDirections(response);
            gmaps.showSteps(response);
            }
        });
        },

    showSteps: function(directionResult) {
        // For each step, place a marker, and add the text to the marker's
        // info window. Also attach the marker to an array so we
        // can keep track of it and remove it when calculating new
        // routes.
        var myRoute = directionResult.routes[0].legs[0];

        for (var i = 0; i < myRoute.steps.length; i++) {
            var marker = new google.maps.Marker({
                position: myRoute.steps[i].start_location,
                map: map.instance
            });
            gmaps.attachInstructionText(marker, myRoute.steps[i].instructions);
            this.markerArray[i] = marker;
        }
        },

         attachInstructionText: function(marker, text) {

        // Instantiate an info window to hold step text.
        var stepDisplay = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'mouseover', function() {
            // Open an info window when the marker is clicked on,
            // containing the text of the step.
            stepDisplay.setContent(text);
            stepDisplay.open(map.instance, marker);

        })

            google.maps.event.addListener(marker, 'click', function() {
                map.instance.setZoom(14);
                map.instance.setCenter(marker.getPosition());
                stepDisplay.open(map.instance, marker);
            })

        },

        clearMarkers: function() {

              // First, remove any existing markers from the map.
        for (var i = 0; i < this.markerArray.length; i++) {

            this.markerArray[i].setMap(null);
        }

        // Now, clear the array itself.
        this.markerArray = [];

        }



});

Template.map.onCreated(function() {
    GoogleMaps.ready('map', function(map) {



        var bikeLayer = new google.maps.BicyclingLayer();
        bikeLayer.setMap(map.instance);



        var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(29.71739, -95.40183),
            map: map.instance,
            title: 'Rice U Farmers Market'            
        });        
        var infowindow1 = new google.maps.InfoWindow({
              content: ''
          });

        google.maps.event.addListener(marker1, 'click', function() {
            infowindow1.setContent( '<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(calcRoute());">Directions from my Location</button>');
            infowindow1.open(map.instance, marker1);
        });

        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(29.81063, -95.37999),
            map: map.instance,
            title: 'Canino\'s Produce'            
        });
        var infowindow2 = new google.maps.InfoWindow({
              content: 'Canino\'s Produce'
          });

        google.maps.event.addListener(marker2, 'click', function() {
            infowindow2.open(map.instance, marker2);
        });

        var image = '/img/app/flag1.png'
        var marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(pos.lat, pos.lng),
            map: map.instance,
            title: 'You are here',
            icon: image
        });

        var rendererOptions = {
            map: map.instance
        }

        this.directionsService = new google.maps.DirectionsService();

        directionsDisplay = new                                                         google.maps.DirectionsRenderer(rendererOptions);

        // global flag saying we intialized already
        Session.set('map', true);
    })


});

Answer 1

您必须将 Meteor 将调用的方法的名称作为字符串传递；

替换：

'<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(calcRoute());">Directions from my Location</button>');
        infowindow1.open(map.instance, marker1);

与：

'<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(\'calcRoute\');">Directions from my Location</button>');
        infowindow1.open(map.instance, marker1);