2013-10-13 2 views
1

я получил страницу с именем map.html, его простой HTML, который использует Google Maps API:Как загрузить файл на конкретную страницу?

<head> 
    <script type="text/javascript" 
      src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&sensor=true&region=IL"> 
    </script> 
    <script src="map.js" type="text/javascript"></script> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
</head> 
     <body> 

     </body> 
<template name="map"> 
    <div id="map-canvas"></div> 
</template> 

и им с помощью железо-маршрутизатор, чтобы направить на эту страницу:

this.route("map"); 

также с использованием pathFor:

<a href="{{pathFor 'map'}}" class="map"><div class="inner">set location</div></a></div> 

и, наконец, мои карты Google инициализировать функцию, которая находится в файле с именем Sperate map.js:

$(document).ready(function() { 

    function initialize() { 
     var TLV = new google.maps.LatLng(32.06461, 34.777222); 
     var mapOptions = { 
      zoom: 12, 
      center: TLV, 
      panControl: false, 
      zoomControl: false, 
      mapTypeControl: true, 
      scaleControl: false, 
      streetViewControl: false, 
      overviewMapControl: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     marker = new google.maps.Marker({ 
      position: TLV, 
      map: map, 
      title: 'Hello World!', 
      draggable: true 
     }); 

     google.maps.event.addListener(marker, 'dragend', function (evt) { 
      var pos = [marker.getPosition().lat(), marker.getPosition().lng()]; 
      console.log(pos); 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

все работает нормально, если вы вручную путь к HTTP: локальный/карта но если вы идете с локального и кликов по ссылке, что маршрут на карте ее не работает, теперь я получить его, что метеорит обслуживает все файлы при запуске , qusetion как предотвратить это? или как обслуживать определенный файл на определенной странице?

ответ

6

Вы не думаете о методе Метеор: Метеор связывает все ваши ресурсы HTML и JS с клиентом (таким образом, начальное медленное время запуска приложения Meteor при первой загрузке, это, вероятно, будет рассмотрено позже). Это означает, что все, что вы положили в теги головы и тела, в конечном итоге будет слито, нет понятия «страница» с отдельной головой и телом. Вы также не должны включать сторонний код в традиционный способ, удалите все ваши ресурсы из основного тега. Вы должны поместить свой собственный код (map.js) в «client/js /» и ваши библиотеки в «client/compatible /», они будут отправлены и отправлены клиенту.

В настоящее время происходит то, что ваш код map.js выполняется традиционным способом jQuery на document.ready, который происходит ТОЛЬКО ОДИН ВРЕМЯ в приложении Meteor, потому что мы говорим о приложении единой веб-страницы. Однако, когда вы переходите к «/», этот код выполняется, когда надлежащего DOM еще нет, и к тому времени, когда вы перейдете к «/ map», код не будет повторно выполнен, поэтому он не выполняется.

Для решения этой конкретной проблемы, действуйте следующим образом:

Сначала вы должны окружить карту-холст с {{}} #constant директивы.

<template name="map"> 
    {{#constant}} 
     <div id="map-canvas"></div> 
    {{/constant}} 
</template> 

Это покажет Метеор, чтобы ничего не засавить внутри этого блока помощника: он не испортите с Google Maps виджет, который не нуждается в реакционной способности и перерисовка в любом случае. Если вы этого не сделаете, всякий раз, когда реактивный источник изменяется на странице и заставляет обновлять DOM, он может уничтожить div-карту canvas, чтобы заменить ее новым (это в основном то, что делает rerendering) и разрушить Google Карты собственного материала.

Затем введите код инициализации Карт Google в обратный вызов Template.map.rendered.

Template.map.rendered=function(){ 
    var initializeOnlyOnce=_.once(function(){ 
     // Google Maps initialization code goes here 
    }); 
    initializeOnlyOnce(); 
}; 

Чтобы быть уверенным, что он будет вызван только один раз рендеринга Template.map, мы используем underscore.once (http://underscorejs.org/#once). Вам не понадобится addDomListener window.load, потому что к моменту запуска этого кода страница загрузится, и мы готовы выполнить рендеринг Карт Google сразу.

Сообщите мне, если он решает вашу проблему, я не тестировал этот код, но это должно заставить вас начать с того, куда идти, потому что на данный момент вы не можете помешать Метеору обслуживать все ваши файлы при запуске и обслуживание определенных файлов на определенной странице - это не путь, потому что в «Метеор» нет такой концепции «страницы».

Эти вещи довольно утомительны в данный момент, но я слышал, что новый пользовательский интерфейс Meteor сделает его намного проще.

+0

wow saimeunt! я абсолютно ошеломлен! удивительный ответ, большое вам спасибо, всего за один ответ вы научили меня так много, я думаю, что получил «метеорный путь» благодаря вам. –

Смежные вопросы