使用 Meteor JS 加载谷歌地图答案

【问题标题】：Loading Google Map using Meteor JS使用 Meteor JS 加载谷歌地图
【发布时间】：2014-07-04 03:19:37
【问题描述】：

使用 Meteor 0.8.2 和 Google Maps API 3.0 版

HTML 文档：（我省略了我的谷歌地图密钥，但我有一个有效的）

<head>
  <title>myapp</title>
   <script src="http://maps.googleapis.com/maps/api/js?key=####&sensor=false">
type="text/javascript">
</head>

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

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
</template>

js 文档：

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "Welcome to myapp.";
  };

  Template.hello.events({
    'click input': function () {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

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

我主要从网上找到的资源中获取样板代码。这些资源中的大多数都是大约一年的历史，所以我想知道软件版本之间是否可能存在兼容性问题。

我想知道如何使用上面的代码加载地图。

【问题讨论】：

我不明白这个问题。我在您的代码中没有看到任何加载地图的尝试？如果您正在寻找 google maps api 的教程，那么我相信您可以找到一个。如果与问题无关，为什么要向我们展示流星样板代码？

标签： google-maps meteor

【解决方案1】：

将html元素添加到hello模板中：

<div id="map-canvas" style="height: 300px; width: 300px"></div>

将法线贴图加载器添加到渲染回调中：

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

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

早在 Meteor 渲染回调时，同样的代码就可以工作，所以没有任何改变。

所有代码都可以在Google Maps API 页面上轻松获得，并且已经有一些关于此主题的问题，包括特定于流星的ones。

【讨论】：