Meteor.js e Google Maps

ho già incluso le mappe api nel mio progetto. Ora voglio mostrare alcuni indicatori sulla mia mappa. Ho initialse mia mappa in una funzione di avvio:Meteor.js e Google Maps

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

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

quanto mi misi al centro della mappa su rendendo

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);

Fino ad ora tutto funziona bene. Nonostante io abbia un PostCollection che contiene alcune coordinate per me. Ho una pubblicazione e sottoscrizione. Ora voglio mostrare i miei post tramite marcatori sulla mappa.

La mia prima idea era di farlo nella mia funzione di rendering. Il problema è che durante il caricamento iniziale non vengono visualizzati post, perché la mia raccolta locale (clientide) non contiene post. Ci vuole un po 'di tempo prima che i messaggi vengano caricati dal server.

Questo è il motivo per cui ho provato a costruire una funzione helper. Perché l'helper si ricarica automaticamente se qualcosa all'interno dei miei post cambia.

Template.mapPostsList.helpers({ 
posts: function() { 
    var allPosts = Posts.find(); 
    allPosts.foreach(function(post) { 
     create marker and attach it to the map 
     .... 
     marker.setMap(Map); 
    })

Il problema è ora che la mia variabile di mappa non è definita. C'è un modo per definirlo in ambito globale? Perché posso usare la mia variabile Mappa nella mia funzione di rendering? Nonostante non gradisca il mio approccio per iniettare i miei marker con la funzione helper o è il solito modo?

Qualcuno può darmi un suggerimento su come realizzare il mio problema?

fonte

2013-05-26 chaosbohne

Come nel mio messaggio scritto ho avuto bisogno di aiuto per integrare la funzionalità di google maps. La domanda non è stata esaudita fino ad ora e voglio che tu presenti una breve introduzione su come risolvere questo problema.

Come integrare le mappe in meteor.js/meteorite.js?

In un primo momento è necessario includere lo script mappe in testa-tag

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

quanto deve creare una mappa-Template:

<template name="mapPostsList"> 
    <div id="map"> 
    <div id="map-canvas"></div> 
    </div> 
</template>

nel relativo js-File è necessario definire una funzione resa. Quando viene invocata la funzione di rendering, crei una mappa e mostri un indicatore sulla mappa. (Non dimenticate di dare un po 'di mappare 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); 
};

Ora le mappe-Object vengono ricreate everytimes il modello è reso. Questa non è la migliore pratica, ma sta funzionando. Ho provato a inserire la creazione in Template.mapPostsList.created-callback ma genera sempre un errore di offset. Poi ho impostato un indicatore con la mia posizione sulla mappa e definito una sessione in cui la mia mappa è stata inizializzata.

Bene. Ma ora la mia Session viene inizializzata al primo rendering, ecco perché l'ho impostata su false quando il mio modello è stato distrutto.

Template.mapPostsList.destroyed = function() { 
    Session.set('map', false); 
};

Se si desidera recuperare i propri messaggi sulla mappa è necessario definire una funzione di esecuzione automatica.

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.la funzione di esecuzione automatica viene sempre attivata se il contenuto cambia. Ciò significa che se cambio la mia variabile di mappa relativa alla Sessione viene richiamato l'autorun. Se lo metto a false non faccio nulla. Altrimenti, prendo tutti i miei messaggi sulla mappa entro un forEach. A causa della ricreazione della mappa al momento del rendering, non ho bisogno di controllare quali post sono già segnati sulla mappa quando la mia collezione cambia.

Questa soluzione funziona abbastanza bene per me.

Spero di poter aiutare qualcuno con questo!

fonte

2013-05-28 16:39:22 chaosbohne

Ricevo un Google non è l'errore definito anche se ho incluso il tag script nell'intestazione e seguii i vostri passi, tutte le idee? – Kjellski

Forse, se hai un esempio per me;) – chaosbohne

Mi dispiace, ho lasciato l'argomento tempo fa e non sono riuscito a recuperare. Colpa mia. – Kjellski

Quello che ha funzionato per me è stata la seguente:

Includere il tag script sulla testa per caricare le mappe di Google.
includere un altro tag script che racconta google maps cosa fare (inizializzare) una volta che la finestra è caricata
Posizionare la funzione che carica la carta nel div nel file di vostro meteora js

Ecco il codice

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); 
}

Speranza che aiuta

fonte

2013-08-31 20:57:24

Hey ho provato questo e non sono sicuro se si ha funzionato perché la mappa non viene visualizzata. Quando apro la console dice 'Uncaught TypeError: Impossibile leggere la proprietà 'offsetWidth' di null' e punta alla riga 7 del file javascript (' map = new google.maps.Map (document.getElementById ("map-canvas"), mapOptions); '). Hai qualche idea su come risolverlo? – 2016rshah

Nevermind ho appena avuto un refuso nell'HTML scusate – 2016rshah

risposta

Problemi correlati