gpt4 book ai didi

maps - Meteor.js 和谷歌地图

转载 作者:行者123 更新时间:2023-12-04 05:04:00 26 4
gpt4 key购买 nike

我已经将 map api 包含到我的项目中。现在我想在我的 map 上显示一些标记。
我在启动函数中初始化我的 map :

Meteor.startup(function() {
...
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);

比我在渲染上设置 map 的中心
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。
我有发布和订阅功能。现在我想通过 map 上的标记显示我的帖子。

我的第一个想法是在我的渲染函数中执行此操作。问题是在初始加载时没有显示任何帖子,因为我的 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 变量没有定义。有没有办法在全局范围内定义它?为什么我可以在渲染函数中使用我的 Map 变量?
尽管我不喜欢我用辅助函数注入(inject)标记的方法,还是通常的方法?

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

最佳答案

正如我在写的问题中所写的那样,我需要一些帮助来集成谷歌地图功能。
直到现在才回答这个问题,我希望您简要介绍如何解决这个问题。

如何将 map 集成到meteorite.js/meteorite.js?

首先,您必须将 maps 脚本包含到您的 head-tag 中

<head>
....
<title>Meteor and Google</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>

比你应该创建一个 map 模板:
<template name="mapPostsList">
<div id="map">
<div id="map-canvas"></div>
</div>
</template>

在相关的 js 文件中,您应该定义一个渲染函数。调用渲染函数时,您将创建一个 map 并在 map 上显示一个标记。 (别忘了给你map一些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 中,但它总是会引发偏移宽度错误。比我在 map 上设置一个带有我的位置的标记并定义一个我的 map 被初始化的 session 。

好。但是现在我的 Session 在第一次渲染时被初始化,这就是为什么我在我的模板被销毁时将它设置为 false 的原因。
Template.mapPostsList.destroyed = function() {
Session.set('map', false);
};

如果您想将您的帖子提取到 map 上,您必须定义一个自动运行功能。
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 相关的映射变量,则会调用自动运行。如果我将其设置为 false,我什么也不做。否则,我会将我所有的帖子都放到 forEach 中的 map 上。由于在渲染时重新创建 map ,当我的收藏发生变化时,我不需要检查 map 上已经标记了哪些帖子。

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

我希望有人能帮忙解决这个问题!

关于maps - Meteor.js 和谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16761042/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com