javascript - 将 Google map API 与 Meteor.js 结合使用

Question

我正在尝试将 Google Maps 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' });
});

然后我将助手包含在模板中以显示 map 。

<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 控制台上没有错误， map 可能会加载，但由于缺少 css 而无法显示。

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

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

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