尝试使用流星显示 Google 带有地理位置和用户输入的地图方向。除了实际的指示之外的一切都有效

Question

所以我对 Meteor 还是比较陌生，这将是我第一个使用外部 API 的 Meteor 项目，我运行遇到了一些问题。我以前使用地图 api 制作过网络应用程序，显示方向没有问题，但由于某种原因，我在使用 Meteor 时遇到了很多问题。让地图实际显示用户当前位置没有问题，地图样式是我想要的方式，但是当涉及到用户输入方向的部分时，没有任何反应。地图没有更新，我只能盯着当前位置看。我正在使用包 jeremy:geocomplete dburles:google-maps 和 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>

下面是这些模板的事件和助手（暂时忽略所有地理编码内容）：

Template.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() {
  map = 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.onRendered(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();
        });
    }
  });
});

Template.addressForm.events({
  'click button': function() {
        directionsService = new google.maps.DirectionsService;
        directionsDisplay = new google.maps.DirectionsRenderer;

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          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);
              }
          });
        }
    calculateAndDisplayRoute(directionsService, directionsDisplay);
    $(".greet-overlay").toggle();
    }
});

所以是的，基本上一切都按照我想要的方式运行，除了方向。甚至状态响应都没有记录到控制台。我毫不怀疑我在这里做的事情非常愚蠢，这会让我严重质疑我的职业选择。可能会犯错误，我会从中吸取教训。

Answer 1

经过一番摸索，终于弄明白了！所以基本上我所要做的就是在我以错误的顺序初始化一些东西时移动一些东西。我将 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();
    }
});

尝试使用流星显示 Google 带有地理位置和用户输入的地图方向。除了实际的指示之外的一切都有效

Trying to display Google Maps Directions with Geolocation, and user input, using meteor. Everything but the actual directions work

javascript

google-maps

google-maps-api-3

meteor

meteor-blaze