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和谷歌地圖

回答

相關問題