gpt4 book ai didi

javascript - 带有 Meteor 的 Google map 无法正常工作

转载 作者:行者123 更新时间:2023-11-29 16:15:45 28 4
gpt4 key购买 nike

对于我的项目,我需要 google maps 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>

我的代码:

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:未定义谷歌

我怎样才能让它工作?

最佳答案

meteor 脚本通常在加载谷歌地图 API 之前运行,因此最好将代码放在 Template.rendered 中:参见 Template.rendered在 meteor 文档中

例如如果你有一个模板

<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 哈希来检查它是否只设置一次 map 中心/设置。

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

关于javascript - 带有 Meteor 的 Google map 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16383866/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com