cha*_*hne 8 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变量？尽管我不喜欢我的方法用辅助功能注射我的标记,还是通常的方式？
有人能给我提示如何解决我的问题吗？
cha*_*hne 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中获取我在地图上的所有帖子.由于在渲染时重新创建地图,我不需要在我的集合发生变化时检查地图上已经标记了哪些帖子.
这个解决方案适合我.
我希望有人可以帮助我!