将 geoJSON 层添加到 Meteor.js 中的 google 地图

Question

我有一个普通的 google 地图显示良好，而运行在 Meteor 中使用 bootstrap，还有这个插件 - https://github.com/dburles/meteor-google-maps 我是 [=35 的新手=] 并且不知道如何从城市打开的 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');
});

我正在尝试将其翻译成 'meteor'。

感谢 Ethaan 的建议和一些工作，我找到了解决方案。我放弃了流星插件和 Google 地图。我选择了 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() {});
}

Answer 1

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

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

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

看来您是在问一种在 meteor 上使用 gmaps 的方法，我想这就是我现在所能做的，而且没有给出任何错误。

祝你好运

将 geoJSON 层添加到 Meteor.js 中的 google 地图

Adding geoJSON layer to a google map in Meteor.js

geojson

meteor