无法使用Google Map API3在流星应用程序上显示地图 [英] Cannot get map to display on meteor app using google map api3
问题描述
我是流星的新手，我正在研究教程之外的第一个应用程序.我来自节点+快递世界.我目前正在尝试将使用Google Maps Java脚本api v3在Node + express上构建的应用程序转换为流星应用程序，以便我可以将其分发到特定设备.在试用中，通过将地图代码放入html页面的head元素中，我使该应用程序在Web上本地运行，并且按预期运行.一旦我尝试将其导入到android设备上，我就会收到错误消息:
Hi I am new to meteor and I am working on my first application beyond the tutorial. I am coming from a node + express world. I am currently trying to transform an application I built on Node+express using the google maps java script api v3 into a meteor application so that I may be able to distribute it to specific devices. In my trials I got the app working locally on the web by placing my map code into the head element of my html page and it ran as intended. Once I tried to import it onto an android device I received the error :
Uncaught ReferenceError: google is not defined
由于该错误，它导致我出现这篇文章告诉我移动我的地图代码插入了Template.rendered函数，因为流星脚本在加载google maps api之前运行，这似乎是正确的.我按照该帖子上的说明进行操作，现在收到一个新错误，内容为:
from that error it led me to this post telling me to move my map code into a Template.rendered function because the meteor script is being run before the google maps api is being loaded which seemed correct. I followed the instructions on that post and I am now being served with a new error stating :
Uncaught TypeError: Cannot set property 'rendered' of undefined
通过谷歌搜索，我进入了此关于我的错误的博客帖子.它指出在我加载html页面的顺序中存在问题.它指导您更改packages.json文件，以重新构造文件在其中投放的顺序.这里的问题是我的packages文件与此类似设置她的方式，我很难将其与她的文件相关联.任何建议将不胜感激，我将在下面提供当前应用程序的代码.
Through googling this took me to this blog post in reference to my error. It states that there is an issue in the order I am loading my html page in. It guides you to change your packages.json file to restructure the order that your files are being served in. The issue here was my packages file is not similarly set up the way hers is and I am having trouble relating it to her file. Any advice would be appreciated I will include code below for my current application.
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
提前感谢您的时间.请让我知道我是否可以提供任何其他帮助.
Thank you for your time in advance. Please let me know if there is anything I can include that would be more helpful.
当前正在研究针对带有JavaScript api v3的googlemap使用此流星包发布更新.
EDIT 1: Currently looking into using this meteor package for googlemaps with javascript api v3 will post updates.
推荐答案
您正在使用流星的哪个版本?
wich meteor version are you using?
运行meteor --version，如果低于1.0.4，则将渲染更改为此( onRendered .
run meteor --version and if is under 1.0.4 change the rendered to this(rendered = function() was depurated), now we use onRendered .
Template.maps.onRendered(function(){
//map code here
});
此外，您在这里不需要google.maps.event.addDomListene，也可以像这样进行操作.
Also you don't need the google.maps.event.addDomListene here, you can do it more like this.
//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
});
但是代码还可以.检查此垃圾
But the code its ok. check this junk 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.
And the 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);
}
这篇关于无法使用Google Map API3在流星应用程序上显示地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
