谷歌地图与流星不工作

对于我的项目，我需要谷歌地图API。我只是可以通过脚本标记服务api，所以我尝试了类似的东西。谷歌地图与流星不工作

我的html：

<head> 
    <title>app</title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
</head> 

<body> 
    {{> hello}} 
</body> 

<template name="hello"> 
    <div id="map-canvas"/> 
</template>

我的JS：

if (Meteor.isClient) { 

    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions);  
} 

if (Meteor.isServer) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    }); 
}

在执行错误是：未捕获的ReferenceError：谷歌没有定义

我怎样才能得到这个工作？

来源

2013-05-05 chaosbohne

流星脚本在谷歌地图API之前通常运行加载所以最好把你的代码在一个Template.rendered：看Template.rendered在流星文档

例如，如果你有一个模板

<template name="maps"> 
    <div id="map-canvas"></div> 
</template>

你的js应该是：

Template.maps.rendered = function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
}

它确实更多地取决于你的模板是什么样子。每当模板发生反应时，呈现的回调将重新运行。所以如果你发现它重新渲染，你可能不得不使用Session哈希来检查它只设置一次地图中心/设置。

另一种选择是将地图居中代码放在Meteor.startup(function() { ... });中，但这又取决于您的模板结构，因为地图需要在第一个模板上可见，而不是在另一个页面上可见（因为div元素不会在屏幕）

来源

2013-05-05 13:10:49 Akshat

使用.created方法而不是.rendered仅执行一次任务 – handmade 2013-05-07 22:51:49

使用'.created'不需要首先渲染dom吗？（即地图画布不会准备好吗？）我认为，但我会遇到错误，试图找到地图画布 – Akshat 2013-06-19 17:11:38

谷歌地图与流星不工作

回答

相关问题