在 Meteor.js 中将 geoJSON 图层添加到谷歌地图答案

【问题标题】：Adding geoJSON layer to a google map in Meteor.js在 Meteor.js 中将 geoJSON 图层添加到谷歌地图
【发布时间】：2015-03-28 03:34:32
【问题描述】：

我有一个简单的谷歌地图，在使用引导程序在 Meteor 中运行时显示良好，还有这个插件 - https://github.com/dburles/meteor-google-maps 我是 Meteor.js 的新手，不知道如何从城市加载一些本地路径数据打开 geoJSON 文件。我已经能够使用 loadGeoJson() 在普通的 javascript 中做到这一点，但很难将它整合到流星中。

模板和javascript如下。

if (Meteor.isClient) {
  Meteor.startup(function() {
    GoogleMaps.load();
  });

  Template.map.helpers({
    exampleMapOptions: function() {
      // Make sure the maps API has loaded
      if (GoogleMaps.loaded()) {
        // Map initialization options
        return {
          center: new google.maps.LatLng(43.613, -116.211),
          zoom: 12
        };
      }
    }
  });

  Template.map.onCreated(function() {
    // We can use the `ready` callback to interact with the map API once the map is ready.
    GoogleMaps.ready('exampleMap', function(map) {
      // Add a marker to the map once it's ready
      var marker = new google.maps.Marker({
        position: map.options.center,
        map: map.instance
      });
    });
}

<template name="map">
	<div class="container-fluid text-center">
		<div class="map-container">
    		{{> googleMap name="exampleMap" options=exampleMapOptions}}
  		</div>
	</div>
</template>

因此，使用普通的 html 和 js/jquery，我可以通过以下方式拉入地理层：

    $(document).ready(function(){
    var mapOptions = {
        center: { lat: 43.618331, lng:  -116.219650},
        zoom: 12
    };

    var map = new google.maps.Map(document.getElementById('myMap'),
                    mapOptions);

    map.data.loadGeoJson('http://opendata.cityofboise.org/datasets/6958bea81e2c482b89f917de9dd4f952_1.geojson');
});

我正在尝试将其翻译成“流星”。

感谢 Ethaan 的建议和一些工作，我找到了解决方案。我放弃了流星插件和谷歌地图。我选择了 Leaflet 和 OpenStreetMaps——对我来说，leaflet 的 geoJSON 集成看起来更容易处理。然后玩 Meteor 的 .rendered 方法。我使用 jquery 的 ajax() 来获取数据并将其存储在变量中。成功！这是 JS -

Template.map.rendered = function() {
      var map = L.map('map_container', {maxZoom: 19, zoom: 13, zoomControl: false, center: ['43.6167','-116.2000']});
      map.attributionControl.setPrefix('');
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
      L.Icon.Default.imagePath = 'packages/leaflet/images';

      var theData = new L.geoJson();
      theData.addTo(map);

      $.ajax({
        dataType: "json",
        url: "data/myDataFile.json",
        success: function(data) {
            $(data.features).each(function(key, data) {
            theData.addData(data);
            });
        }
        }).error(function() {});
}

【问题讨论】：

那么上面的代码工作正常吗？具体是什么问题或需要的解决方案/补充？

标签： meteor geojson

【解决方案1】：

有一些方法可以将地图加载到meteor中，但是meteor知道地图何时准备好的方法是取消$(document).ready(function(){});，而是使用onRendered函数，你根本不需要帮助器，只需要一个 init 函数和一个 onRender（只是为了确保带有地图的 <div> 已准备好。

我这里做了一个Demo是Source Code on Github，它使用的是旧版本的meteor (1.2.1)，但唯一认为改变了它的渲染功能

我从不使用 meteor-gogole-maps 将 CDN 放入 <head> 作品中；p

似乎你在问一种在流星上使用 gmaps 的方法，我想这就是我现在所能做的，也没有给出错误。

祝你好运

【讨论】：

谢谢！感谢您的时间和建议！
成功！添加了我对问题的解决方案。再次感谢您为我指明正确的方向。