Question

嗨，我是meteor的新手，我正在研究教程之外的第一个应用程序。我来自一个节点+快递世界。我目前正在尝试使用google maps java script api v3将我在Node + express上构建的应用程序转换为流星应用程序，以便我可以将其分发到特定设备。在我的试验中，我通过将我的地图代码放入我的html页面的head元素中，使应用程序在Web上本地工作，并按预期运行。一旦我尝试将其导入到Android设备上，我收到了错误：

    Uncaught ReferenceError: google is not defined

从那个错误导致我this post告诉我将我的地图代码移动到Template.rendered函数中，因为在加载google maps api之前运行了meteor脚本似乎是正确的。我按照该帖子上的说明操作，现在我收到了一条新的错误说明：

    Uncaught TypeError: Cannot set property 'rendered' of undefined

通过谷歌搜索，我带了this blog post参考我的错误。它表示我正在加载我的html页面的顺序存在问题。它指导您更改packages.json文件以重新调整文件的服务顺序。这里的问题是我的包文件不相似设置她的方式，我无法将其与她的档案联系起来。如有任何建议，我将在下面提供我当前申请的代码。

HTML：

    <head>

    <title>Google Maps App</title>

    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&sensor=true">

    </script>


    </head>

    <body>


       <template name="maps">

          <div id="map-canvas"></div>

       </template>
    </body>

JS：

    if (Meteor.isClient) {

      Template.maps.rendered = function() {
        var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    }




    }

    if (Meteor.isServer) {
      Meteor.startup(function () {

      });
    }

软件包：

    meteor-platform
    autopublish
    insecure
    twbs:bootstrap
    fortawesome:fontawesome
    jquery

感谢您提前的时间。如果有任何我可以提供的内容会更有帮助，请告诉我。

编辑1：目前正在考虑使用this meteor package与googlemaps一起使用javascript api v3发布更新。

Answer 1

你正在使用meteor版本吗？

运行meteor --version，如果小于1.0.4，请将渲染更改为此（rendered = function() was depurated），现在我们使用onRendered。

Template.maps.onRendered(function(){
   //map code here
 });

此外，您不需要google.maps.event.addDomListene，您可以更喜欢这样做。

//appName/client/helpers.

initMap = function(){
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

//appName/client/views/map/map.js

Template.maps.onRendered(function(){
       initMap
     });

但是代码还可以。检查this垃圾DEMO

<强>更新

这就是html的外观。

<head>
    <title>Google Maps App</title>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG1mocxosoC9cq-ucFO3vdZCcUxyKa6B4&sensor=true">
    </script>  
</head>
  <body>
    {{> maps}}
  </body>
<template name="maps">
<div id="map-canvas"></div>
 </template>

和Javascript。

  Template.maps.onRendered(function(){
     initMap();
    })
initMap = function(){
    var map;
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

无法使用谷歌地图api3获取地图以显示在流星应用程序上

1 个答案: