Meteor.js 和谷歌地图 [英] Meteor.js and Google Maps
问题描述
我已经在我的项目中包含了地图 API.现在我想在我的地图上显示一些标记.我在启动函数中初始化我的地图:
Meteor.startup(function() {...var mapOptions = {变焦:8，mapTypeId: google.maps.MapTypeId.ROADMAP};Map = new google.maps.Map(document.getElementById("map-canvas"),地图选项);比我在渲染时设置地图的中心
Template.mapPostsList.rendered = function() {var p2 = Session.get('location');Map.setCenter(new google.maps.LatLng(p2.lat, p2.lng));var 标记 = 新的 google.maps.Marker({位置:新的 google.maps.LatLng(p2.lat, p2.lng)，标题:'我的位置'});标记.setMap(地图);到目前为止一切正常.尽管我有一个 PostCollection，其中包含我的一些坐标.我有一个发布和订阅功能.现在我想通过地图上的标记显示我的帖子.
我的第一个想法是在我的渲染函数中执行此操作.问题是在初始加载时不显示帖子，因为我的 localcollection(客户端)不包含任何帖子.从服务器加载帖子需要一些时间.
这就是我尝试构建辅助函数的原因.因为如果我的帖子中的某些内容发生变化，助手会自动重新加载.
Template.mapPostsList.helpers({帖子:函数(){var allPosts = Posts.find();allPosts.foreach(function(post) {创建标记并将其附加到地图....标记.setMap(地图);})现在的问题是，我的地图变量没有定义.有没有办法在全局范围内定义它?为什么我可以在渲染函数中使用我的 Map 变量?尽管我不喜欢我用辅助函数注入标记的方法还是通常的方法?
有人可以给我提示如何解决我的问题吗?
在我写的问题帖子中，我需要一些帮助来集成谷歌地图功能.直到现在这个问题还没有得到解答，我想请您简要介绍一下如何解决这个问题.
如何将地图集成到meteorite.js/meteorite.js中?
首先你必须将地图脚本包含在你的头部标签中
....<title>Meteor 和 Google</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">比你应该创建一个地图模板:
<div id="地图"><div id="map-canvas"></div>在相关的 js-File 中，您应该定义一个渲染函数.调用渲染函数时，您将创建一个地图并在地图上显示一个标记.(别忘了给你map一些css)
Template.mapPostsList.rendered = function() {var mapOptions = {缩放:12，mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("map-canvas"),地图选项);var p2 = Session.get('location');map.setCenter(new google.maps.LatLng(p2.lat, p2.lng));var 标记 = 新的 google.maps.Marker({位置:新的 google.maps.LatLng(p2.lat, p2.lng)，title:'我的位置',图标:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'});标记.setMap(地图);Session.set('map', true);};现在每次渲染模板时都会重新创建地图对象.这不是最佳实践，但它正在起作用.我试图将创建放在 Template.mapPostsList.created-callback 中，但它总是引发偏移宽度错误.然后我在地图上设置一个标记我的位置并定义一个会话来初始化我的地图.
嗯.但是现在我的 Session 在第一次渲染时被初始化，这就是为什么我在我的模板被销毁时将它设置为 false.
Template.mapPostsList.destroyed = function() {Session.set('map', false);};如果你想把你的帖子提取到地图上，你必须定义一个自动运行功能.
Deps.autorun(function() {var isMap = Session.get('map');如果(isMap){var allPosts = Posts.find();allPosts.forEach(功能(后){var 标记 = 新的 google.maps.Marker({位置:新的 google.maps.LatLng(post.location.lat, post.location.lng)，标题:post.title，postId: post._id});标记.setMap(地图);});}});如果内容发生变化，Deps.autorun 函数总是会被触发.这意味着如果我更改与会话相关的映射变量，则会调用自动运行.如果我将它设置为 false 我什么都不做.否则，我将我所有的帖子都提取到一个 forEach 中的地图上.由于在渲染时重新创建地图，我不需要在我的收藏更改时检查地图上已经标记了哪些帖子.
这个解决方案对我来说效果很好.
我希望有人能帮我解决这个问题！
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);
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.
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);
})
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?
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.
How to integrate maps into meteor.js/meteorite.js?
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>
Than you should create a maps-Template:
<template name="mapPostsList">
<div id="map">
<div id="map-canvas"></div>
</div>
</template>
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);
};
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.
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);
});
}
});
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.
I hope i can someone help with this!
这篇关于Meteor.js 和谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
