Question

使用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 doc：

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
  });
}

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

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

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

使用Meteor JS加载Google Map

1 个答案: