Meteor.js和Google Maps [英] Meteor.js and Google Maps
问题描述
我已经将maps api包含到我的项目中.现在，我想在地图上显示一些标记. 我在启动功能中初始化地图:
i already included maps api into my project. Now i want to show some markers on my map. I initialse my map in a startup function:
Meteor.startup(function() {
...
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
比我在渲染时设置地图的中心
Than i set the center of the map on rendering
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，其中包含一些适用于我的坐标. 我有一个发布和订阅功能.现在我想通过地图上的标记显示我的帖子.
Till now everything works fine. Despite i have a PostCollection which contains some coordinates for me. I have a publish and subscribefunction. Now i want to show my posts via markers on the map.
我的第一个想法是在渲染函数中执行此操作.问题在于，在初始加载时没有显示任何帖子，因为我的localcollection(clientside)不包含任何帖子.从服务器加载帖子需要一些时间.
My first idea was to do this in my rendered function. The problem is that on initial load no posts are displayed, because my localcollection(clientside) does not contain any posts. It takes some time until posts are loaded from server.
这就是我尝试建立一个辅助功能的原因.因为如果我的帖子中的某些内容发生更改，帮助程序会自动重新加载.
Thats the reason why i tried to build a helperfunction. Because the helper automatically realoads if something within my posts changes.
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变量未定义.有没有办法在全球范围内对其进行定义?为什么我可以在渲染函数中使用Map变量? 尽管我不喜欢用辅助功能注入标记的方法，还是通常的方法?
The Problem is now, that my map variable is not defined. Is there a way to define it in global scope? Why can i use my Map variable in my rendered function? Despite i dont like my approach to inject my markers with the helperfunction or is it the usual way?
有人可以提示我如何解决我的问题吗?
Can someone give me hint how to accomplish my problem?
推荐答案
在我写的问题贴中，我需要一些帮助来集成google maps功能. 直到现在，这个问题才得到回答，我希望您简要介绍如何解决此问题.
As in my questionpost written i needed some help to integrate google maps functionality. The question was not answered until now and i want you to give a short introduction in how to solve this problem.
如何将地图集成到meteor.js/meteorite.js?
How to integrate maps into meteor.js/meteorite.js?
首先，您必须将maps脚本包含在您的头像中
At first you have to include the maps script into your head-tag
<head>
....
<title>Meteor and Google</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
比您应该创建一个maps-Template:
Than you should create a maps-Template:
<template name="mapPostsList">
<div id="map">
<div id="map-canvas"></div>
</div>
</template>
在相关的js文件中，您应该定义一个渲染函数.调用渲染函数后，您将创建一个地图并在该地图上显示一个标记. (不要忘了给你一些地图css)
In the related js-File you should define a rendered function. When rendered function is invoked you create a map and show a marker on the map. (Dont forget to give you map some 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，但它始终会引发偏移宽度错误.然后，我在地图上设置了位置标记，并定义了初始化地图的会话.
Now the maps-Object gets recreated everytimes the template is rendered. This is not best practice, but it is working. I tried to put the creation in Template.mapPostsList.created-callback but it always fires an offset-width error. Than i set a marker with my position to the map and define a session that my map is initialised.
好吧.但是现在我的会话在第一次渲染时就初始化了，这就是为什么我的模板销毁时将其设置为false.
Well. But now my Session gets initialised on first rendering, thats why i set it to false when my template is destroyed.
Template.mapPostsList.destroyed = function() {
Session.set('map', false);
};
如果您想将帖子提取到地图上，则必须定义一个自动运行功能.
If you want to fetch your posts to the map you have to define a autorun function.
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中将我所有的帖子都提取到地图上.由于在渲染时会重新创建地图，因此我的收藏集发生更改时，我无需检查哪些帖子已在地图上标记.
The Deps.autorun function is always fired if content changes. That means if i change my Session related map-variable the autorun gets invoked. If i set it to false i do nothing. Else i fetch all my posts to the map within an forEach. Because of recreating the map on rendering i dont need to check which posts are already marked on the map when my collection changes.
此解决方案对我来说效果很好.
This solution works quite well for me.
我希望有人可以帮忙！
这篇关于Meteor.js和Google Maps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
