Meteor.js和谷歌地图

时间:2013-05-26 16:02:07

标签: maps meteor meteorite

我已将地图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变量? 尽管我不喜欢我的方法用辅助函数注入我的标记,还是通常的方式?

有人可以告诉我如何解决我的问题吗?

2 个答案:

答案 0 :(得分:19)

正如在我提出的问题帖子中,我需要一些帮助来整合谷歌地图功能。 直到现在才回答这个问题,我希望你简要介绍一下如何解决这个问题。

如何将地图整合到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中,您应该定义一个渲染函数。调用渲染函数时,您可以创建地图并在地图上显示标记。 (别忘了给你一些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函数。这意味着如果我更改与Session相关的map-variable,则会调用autorun。如果我把它设置为假,我什么都不做。另外,我在forEach中获取我在地图上的所有帖子。由于在渲染时重新创建地图,因此当我的集合发生变化时,我不需要检查地图上已经标记了哪些帖子。

这个解决方案适合我。

我希望有人可以为此提供帮助!

答案 1 :(得分:2)

对我有用的是:

  1. 在头上添加脚本标记以加载谷歌地图。
  2. 在窗口加载后,包含另一个脚本标记,告诉谷歌地图做什么(初始化
  3. 将加载地图的函数放入meteor js文件中的div
  4. 这是代码

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

    希望有所帮助