Boa*_*och 1 javascript google-maps routes meteor iron-router
我有一个名为map.html的页面,它是一个使用google maps api的简单html:
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&sensor=true®ion=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>
最后我的谷歌地图初始化函数,该函数位于名为map.js的sperate文件中:
$(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:localhost/map,一切正常,但是如果你从localhost转到并点击链接那个路由来映射它不起作用,现在我得到它meteor在启动时提供所有文件,问题是如何防止它？或者如何将某个文件提供给特定页面？
你不是在考虑Meteor方式:Meteor将你的所有HTML和JS资源捆绑到客户端(因此Meteor应用程序在首次加载时的初始缓慢启动时间,这可能会在稍后解决).这意味着您在头部和身体标签中放置的所有内容最终都会合并,没有单独的头部和身体的"页面"概念.您不应该以传统方式包含第三方代码,从头标记中删除所有资源.你应该将自己的代码(map.js)放在"client/js /"中,将你的lib放在"client/compatibility /"中,它们将被捆绑并发送给客户端.
现在发生的事情是你的map.js代码在document.ready上以传统的jQuery方式执行,这在Meteor应用程序中只发生一次,因为我们讨论的是单个网页应用程序.但是当你导航到"/"时,当正确的DOM还没有出现时执行这段代码,当你导航到"/ map"时,代码不会被重新执行,这就是它失败的原因.
要解决此特定问题,请按以下步骤操作:
首先,您应该使用{{#constant}}指令包围地图画布.
<template name="map">
{{#constant}}
<div id="map-canvas"></div>
{{/constant}}
</template>
这将告诉Meteor不要重新渲染这个块助手里面的任何内容:它不会搞乱谷歌地图小部件,无论如何都不需要反应和重新渲染.如果你不这样做,每当一个被动的源在页面中发生变化并导致你的DOM刷新时,它可能会消除map-canvas div以用一个新的替换它(这基本上就是重新渲染的那样)并破坏谷歌地图自己的东西.
然后将您的Google Maps初始化代码放入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 Maps渲染.
告诉我,如果它解决了你的问题,我还没有测试过这个代码,但这应该让你开始去哪里,因为目前你不能阻止Meteor在启动时提供你的所有文件,并提供特定的文件到特定页面不是要走的路,因为Meteor中没有"页面"这样的概念.
这些事情目前相当繁琐,但我听说新的Meteor UI会让它变得更加简单.