Meteor.js和谷歌地图

我已经将api映射到了我的项目中。现在我想在我的地图上显示一些标记。我initialse在启动函数我的地图：Meteor.js和谷歌地图

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（客户端）不包含任何帖子。从服务器加载帖子需要一些时间。

这就是为什么我试图建立一个帮助功能。因为如果我的帖子内容发生变化，助手会自动实现。

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变量？尽管我不喜欢我的方法注入辅助功能我的标记或是通常的方式吗？

有人可以给我提示如何完成我的问题？

来源

2013-05-26 chaosbohne

正如我写的问题，我需要一些帮助来整合谷歌地图功能。这个问题到现在为止还没有得到解答，我希望你给出一个关于如何解决这个问题的简短介绍。

如何将地图整合到meteor.js/meteorite.js？

首先，你必须包括地图脚本到你的头上标签

<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-文件一个渲染函数。当渲染函数被调用时，您将创建一个地图并在地图上显示一个标记。（不要忘了给你地图一些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); 
};

现在的地图对象获取重新创建每次模板呈现。这不是最佳实践，但它正在工作。我试图将创建放在Template.mapPostsList.created-callback中，但它总是触发一个偏移宽度的错误。比我在地图上设置了一个标记，并定义了我的地图初始化的会话。

好吧。但是现在我的会话在第一次呈现时被初始化，这就是为什么当我的模板被销毁时我将它设置为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); 
    });  
    } 
});

The Deps。自动运行功能总是在内容改变时触发。这意味着如果我改变我的会话相关的map-variable自动运行被调用。如果我把它设置为假，我什么都不做。否则，我会将所有帖子提交到forEach中的地图。由于在渲染时重新创建地图，我不需要检查收藏更改时哪些帖子已在地图上标记。

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

我希望我能有人帮助这个！

来源

2013-05-28 16:39:22 chaosbohne

我发现了一个谷歌虽然我已经包括在头脚本标记，跟着你的脚步，任何想法是没有定义的错误？ – Kjellski

也许，如果你有我的例子;） – chaosbohne

对不起，我刚刚离开了这个话题，并没有赶上。我的错。 – Kjellski

什么工作对我来说是以下几点：

包括头上的脚本标记加载谷歌地图。
包含另一个脚本代码，告知谷歌地图做什么（初始化）一旦窗口已加载
将加载地图进入格在您的流星js文件

这里的功能代码

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

希望它可以帮助

来源

2013-08-31 20:57:24

嘿，我试过这个，我不确定它是否因为地图没有显示出来。当我打开控制台时，它说'Uncaught TypeError：无法读取'null'属性'offsetWidth'并指向JavaScript文件的第7行（'map = new google.maps.Map（document.getElementById（“map-canvas” ），mapOptions）;'）。你有什么想法如何解决它？ – 2016rshah

没关系我只是在HTML抱歉有一个错字 – 2016rshah

Meteor.js和谷歌地图

回答

相关问题