maps - Meteor.js と Google マップ

Question

私はすでにマップAPIをプロジェクトに含めています。ここで、マップにいくつかのマーカーを表示したいと思います。スタートアップ関数でマップを初期化します。

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(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 変数を使用できるのはなぜですか? ヘルパー関数でマーカーを挿入する私のアプローチが好きではないにもかかわらず、それは通常の方法ですか?

誰かが私の問題を解決する方法を教えてもらえますか?

score 19 · Accepted Answer

私の質問投稿にあるように、Google マップの機能を統合するには助けが必要でした。質問は今まで答えられていませんでした。この問題を解決する方法を簡単に紹介してください。

マップを meteor.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>

maps-Template を作成する必要があるよりも:

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

テンプレートがレンダリングされるたびに maps-Object が再作成されるようになりました。これはベストプラクティスではありませんが、機能しています。作成を 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);
    });    
  }
});

Deps.autorun 関数は、コンテンツが変更された場合に常に起動されます。つまり、セッション関連のマップ変数を変更すると、自動実行が呼び出されます。false に設定すると、何もしません。それ以外の場合は、すべての投稿を forEach 内のマップにフェッチします。レンダリング時にマップを再作成するため、コレクションが変更されたときにマップ上で既にマークされている投稿を確認する必要はありません。

このソリューションは私にとって非常にうまく機能します。

誰かがこれを手伝ってくれることを願っています！

score 2 · Accepted Answer

私にとってうまくいったのは次のとおりです。

head に script タグを含めて、Google マップを読み込みます。
ウィンドウがロードされたら、Google マップに何をすべきか (初期化) を指示する別のスクリプトタグを含めます。
meteor js ファイルの div にマップをロードする関数を配置します。

これがコードです

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

それが役に立てば幸い

maps - Meteor.js と Google マップ

2 に答える 2

Related

Reference