Meteor.js 和谷歌地图答案

【问题标题】：Meteor.js and Google MapsMeteor.js 和谷歌地图
【发布时间】：2013-09-01 05:02:59
【问题描述】：

我已经在我的项目中包含了地图 API。现在我想在我的地图上显示一些标记。我在启动函数中初始化我的地图：

Meteor.startup(function() {
...
var mapOptions = {
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

比我在渲染时设置地图的中心

Template.mapPostsList.rendered = function() {
var p2 = Session.get('location');

Map.setCenter(new google.maps.LatLng(p2.lat, p2.lng));
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(p2.lat, p2.lng),
    title:'Meine Position'
  });
marker.setMap(Map);

到目前为止，一切正常。尽管我有一个包含一些坐标的 PostCollection。我有发布和订阅功能。现在我想通过地图上的标记显示我的帖子。

我的第一个想法是在我的渲染函数中执行此操作。问题是在初始加载时没有显示任何帖子，因为我的 localcollection(clientside) 不包含任何帖子。从服务器加载帖子需要一些时间。

这就是我尝试构建辅助函数的原因。因为如果我的帖子中的某些内容发生变化，助手会自动重新加载。

Template.mapPostsList.helpers({
posts: function() {
   var allPosts = Posts.find();
   allPosts.foreach(function(post) {
      create marker and attach it to the map
      ....
      marker.setMap(Map);
   })

现在的问题是，我的地图变量没有定义。有没有办法在全局范围内定义它？为什么我可以在渲染函数中使用我的 Map 变量？尽管我不喜欢我用辅助函数注入标记的方法还是通常的方法？

谁能给我提示如何解决我的问题？

【问题讨论】：

标签： maps meteor meteorite

【解决方案1】：

在我写的问题中，我需要一些帮助来集成谷歌地图功能。这个问题直到现在才得到回答，我希望你简要介绍一下如何解决这个问题。

如何将地图集成到meteor.js/meteorite.js中？

首先，您必须将地图脚本包含到您的 head-tag 中

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

你应该创建一个地图模板：

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

在相关的 js-File 中你应该定义一个渲染函数。调用渲染函数时，您将创建一个地图并在地图上显示一个标记。（别忘了给你map一些css）

Template.mapPostsList.rendered = function() {  
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var p2 = Session.get('location');

  map.setCenter(new google.maps.LatLng(p2.lat, p2.lng));
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(p2.lat, p2.lng),
    title:'Meine Position',
    icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
  });
  marker.setMap(map);   

  Session.set('map', true);
};

现在，每次渲染模板时都会重新创建 maps-Object。这不是最佳实践，但它正在发挥作用。我试图将创建放在 Template.mapPostsList.created-callback 中，但它总是会引发偏移宽度错误。比我在地图上设置一个带有我的位置的标记并定义一个我的地图被初始化的会话。

嗯。但是现在我的 Session 在第一次渲染时被初始化，这就是为什么当我的模板被销毁时我将它设置为 false。

Template.mapPostsList.destroyed = function() {
  Session.set('map', false);
};

如果你想将你的帖子提取到地图上，你必须定义一个自动运行函数。

Deps.autorun(function() {

  var isMap = Session.get('map');
  if(isMap) {
    var allPosts = Posts.find();
    allPosts.forEach(function (post) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(post.location.lat, post.location.lng),
        title: post.title,
        postId: post._id
      });
      marker.setMap(map);
    });    
  }
});

如果内容发生变化，Deps.autorun 函数总是会被触发。这意味着如果我更改与会话相关的映射变量，则会调用自动运行。如果我将其设置为 false，我什么也不做。否则，我会将我所有的帖子都放到 forEach 中的地图上。由于在渲染时重新创建地图，当我的收藏发生变化时，我不需要检查地图上已经标记了哪些帖子。

这个解决方案对我来说效果很好。

我希望有人能帮忙解决这个问题！

【讨论】：

我收到了一个 google is not defined 错误，尽管我在标题中包含了脚本标签并按照您的步骤操作，有什么想法吗？
也许，如果你有我的例子;)
对不起，我刚刚离开了这个话题，没能赶上。我的错。
I wrote an article on this last year.

【解决方案2】：

对我有用的是：

在头部包含脚本标签以加载谷歌地图。
包含另一个脚本标签，告诉谷歌地图在窗口加载后要做什么（初始化）
将加载地图的函数放入meteor js文件的div中

这是代码

map.html

<head>
  <title>cls</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}&sensor=false"></script>
  <script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  {{> map}}
</body>

<template name="map">
  <!-- Make the div#map-canvas have a height through css or it won't be shown -->
  <div id="map-canvas"/>
</template>

map.js

initialize = function() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

希望对你有帮助

【讨论】：

嘿，我试过了，但我不确定它是否有效，因为地图没有显示。当我打开控制台时，它显示 Uncaught TypeError: Cannot read property 'offsetWidth' of null 并指向 javascript 文件的第 7 行 (map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);)。你知道如何解决它吗？