使用 Google 映射 API 和 Meteor.js

Question

我正在尝试将 Google 地图 API 与 Meteor 1.3 和 dburles:google-maps 包一起使用。

我尝试了多种方式来加载它，但问题是我无法使用它，因为我认为加载时间太长，而且我的页面之前已呈现。

我在我的 main.js 中以这种方式加载它，以确保首先加载它。

import { GoogleMaps } from 'meteor/dburles:google-maps';
import { Meteor } from 'meteor/meteor';

Meteor.startup(function () {
  GoogleMaps.load({ key: 'myKey' });
});

然后我在我的模板中包含帮助程序来显示地图。

<template name="home">
    <h1>Home</h1>

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

</template>

终于有我的帮手来设置模板的选项了。

import { Template } from 'meteor/templating';
import { GoogleMaps } from 'meteor/dburles:google-maps';

import './home_page.html';

Template.home.helpers({
  exampleMapOptions() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8,
      };
    }
  },
});

Template.home.onCreated(function() {
  GoogleMaps.ready('exampleMap', function(map) {
    console.log("I'm ready!");
  });
});

我认为条件 if (GoogleMaps.loaded()) 是什么都不显示的原因，但如果我不输入它，我会收到错误消息，因为 google 对象不存在。

Answer 1

如果您的 JS 控制台没有错误，地图可能会加载但不会显示丢失 css。

如果是这样，请将下面的行添加到您的 main.css

body, html {
    height: 100%;
    width: 100%;
}

.map-container {
    width: 100%;
    height: 100%;
}

使用 Google 映射 API 和 Meteor.js

Using Google Maps API with Meteor.js

javascript

google-maps

meteor

meteor-blaze