2

对于我的项目，我需要谷歌地图 api。我只能通过脚本标签提供 api，所以我尝试了类似的方法。

我的html：

<head>
  <title>app</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
</head>

<body>
  {{> hello}}
</body>

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

我的js：

if (Meteor.isClient) {

  var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);    
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

执行时的错误是：未捕获的 ReferenceError: google is not defined

我怎样才能让这个工作？

4

1 回答 1

6

流星脚本通常在加载谷歌地图 API 之前运行，因此最好将您的代码放入Template.rendered：请参阅流星文档中的Template.rendered

例如，如果你有一个模板

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

你的 js 将是：

Template.maps.rendered = function() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);   
}

这实际上更多地取决于您的模板的外观。每次模板响应更改时，渲染的回调也将重新运行。因此，如果您发现它重新渲染，您可能必须使用Session哈希来检查它只设置地图中心/设置一次。

另一种选择是将您的地图居中代码放入 中Meteor.startup(function() { ... });，但这又取决于您的模板结构，因为地图需要在第一个模板上可见，而不是在另一个页面上可见（因为 div 元素不会出现在屏幕上）

于 2013-05-05T13:10:49.697 回答