Question

我有一个简单的谷歌地图，显示正常，同时在Meteor中使用bootstrap运行，这个插件 - 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我可以用这个来拉入geo层：

    $(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 - 传单的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>准备就绪。

我在这里做了一个演示是Source Code on Github，它使用旧版本的meteor (1.2.1)，但唯一的想法是更改其渲染的功能

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

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

祝你好运

将GeoJSON图层添加到Meteor.js中的Google地图

1 个答案: