Javascript 尝试使用meteor通过地理位置和用户输入显示Google地图方向。除了实际的方向外，一切都有效

所以我对Meteor还比较陌生，这将是我第一个使用外部API的Meteor项目，我遇到了一些问题。我以前使用maps api制作过网络应用程序，显示方向也没有问题，但出于某种原因，我对Meteor有很多问题。我可以让地图实际显示用户的当前位置，并且地图样式是我想要的方式，但是当涉及到用户输入方向的部分时，什么也没有发生。地图没有更新，我只盯着当前位置。我正在使用jeremy:geocomplete dburles:GoogleMaps和mdg:geolocation包

以下是创建地图并为目的地获取用户输入的模板：

<template name="map">
  <div class="map-container">
    {{#unless geolocationError}}
      {{> googleMap name="map" options=mapOptions}}
    {{else}}
      Geolocation failed: {{geolocationError}}
    {{/unless}}
  </div>
</template>

<template name="greeting">
  <div class="greet-overlay">
    <div class="greet-window">
      <div class="splash-window">
        <p class="splash-text">Text</p>
        <img class="splash" src="splash/PClogo.png" alt="Lorem Ipsum">
        {{> addressForm}}
      </div>
    </div>
  </div>
</template> 

<template name="addressForm">
  <div class="form-window">
    <img src="game/directions.png" id="stuff">
    <h1 class="address-title">Enter Destination</h1>
    <input type="text"  id="address" name="text" />
    <button>Submit</button>
  </div>
</template>

---

所以，是的，基本上所有的东西都按照我想要的方式工作，除了方向。甚至没有状态响应被记录到控制台。毫无疑问，我在这里做了一件非常愚蠢的事情，这会让我认真地质疑我的职业选择。可能正在犯错误，我将从中吸取教训

玩了一番之后才明白！所以基本上我所要做的就是在初始化一些错误的东西时移动一些东西。我将

calculateAndDisplayRoute

函数移出addressForm事件模板，并将map.onCreated的内容与addressForm.onRendered交换。现在它的结构如下：

function calculateAndDisplayRoute(service, display) {
    directionsService.route({
      origin: LAT + ',' + LNG,
      destination: DESTLAT + ',' + DESTLNG,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
          console.log('Directions request failed due to ' + status);
        }
    });
  }

emplate.map.helpers({
geolocationError: function() {
  var error = Geolocation.error();
  return error && error.message;
},
  mapOptions: function() {
    var latLng = Geolocation.latLng();
    // Initialize the map once we have the latLng.
    if (GoogleMaps.loaded() && latLng) {
      return {
        center: new google.maps.LatLng(LAT, LNG),
        zoom: MAP_ZOOM,
      };
    }
  }
});

Template.map.onCreated(function() {

  this.autorun(function () {
    if (GoogleMaps.loaded()) {
      $("input").geocomplete()
        .bind("geocode:result", function(event, result){
          DESTLAT = result.geometry.location.lat();
          DESTLNG = result.geometry.location.lng();

          directionsService = new google.maps.DirectionsService;
          directionsDisplay = new google.maps.DirectionsRenderer;
        });
    }
  });
});

Template.addressForm.onRendered(function() {
  GoogleMaps.ready('map', function(map) {
    var latLng = Geolocation.latLng();
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(LAT, LNG),
      map: map.instance,
      icon: '/game/loc_marker.png'
    });
  });
});

Template.addressForm.events({
  'click button': function() {
      var map = GoogleMaps.maps.map.instance;
      calculateAndDisplayRoute(directionsService, directionsDisplay);
      directionsDisplay.setMap(map);
      $(".greet-overlay").toggle();
    }
});

function calculateAndDisplayRoute(service, display) {
    directionsService.route({
      origin: LAT + ',' + LNG,
      destination: DESTLAT + ',' + DESTLNG,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
          console.log('Directions request failed due to ' + status);
        }
    });
  }

emplate.map.helpers({
geolocationError: function() {
  var error = Geolocation.error();
  return error && error.message;
},
  mapOptions: function() {
    var latLng = Geolocation.latLng();
    // Initialize the map once we have the latLng.
    if (GoogleMaps.loaded() && latLng) {
      return {
        center: new google.maps.LatLng(LAT, LNG),
        zoom: MAP_ZOOM,
      };
    }
  }
});

Template.map.onCreated(function() {

  this.autorun(function () {
    if (GoogleMaps.loaded()) {
      $("input").geocomplete()
        .bind("geocode:result", function(event, result){
          DESTLAT = result.geometry.location.lat();
          DESTLNG = result.geometry.location.lng();

          directionsService = new google.maps.DirectionsService;
          directionsDisplay = new google.maps.DirectionsRenderer;
        });
    }
  });
});

Template.addressForm.onRendered(function() {
  GoogleMaps.ready('map', function(map) {
    var latLng = Geolocation.latLng();
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(LAT, LNG),
      map: map.instance,
      icon: '/game/loc_marker.png'
    });
  });
});

Template.addressForm.events({
  'click button': function() {
      var map = GoogleMaps.maps.map.instance;
      calculateAndDisplayRoute(directionsService, directionsDisplay);
      directionsDisplay.setMap(map);
      $(".greet-overlay").toggle();
    }
});