cha*_*hne 2 javascript google-maps-api-3 meteor
对于我的项目,我需要谷歌地图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:未定义谷歌
我怎样才能使这个工作？
流星脚本通常在加载谷歌地图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元素不会出现在屏幕上)
| 归档时间： |
|
| 查看次数： |
2677 次 |
| 最近记录： |