Question

我有一个名为map.html的页面，它是一个使用google maps api的简单html：

<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>

我正在使用iron-router来路由到这个页面：

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在启动时提供所有文件，问题是如何防止它？或者如何将某个文件提供给特定页面？

Answer 1

你不会想到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地图初始化代码放入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东西，因为当这段代码运行时，页面已经加载，我们已经准备好立即执行谷歌地图渲染了。

告诉我它是否解决了你的问题，我还没有测试过这段代码，但这应该让你开始去哪里，因为目前你无法阻止Meteor在启动时提供所有文件，并且服务由于Meteor中没有“页面”这样的概念，因此特定页面的特定文件不是可行的方法。

目前这些事情非常繁琐，但我听说新的Meteor UI会让它变得更加简单。

如何在特定页面上加载文件？

1 个答案: