我在Meteor应用中使用dburles:google-maps。我有一个名为recorridos
的集合,其中每个文档都有一个对象ida
的两个数组(vuelta
和{lat: xxx, lng: yyy}
)。我正在从集合中检索一个文档,并且我创建了两个PolyLine并将它们设置为地图实例,并在ida
和{{1之间切换}}。
它工作正常,但有时,当我重新加载页面时,我收到以下错误:
vuelta
这是代码:
recorridos-mapa.js
Exception from Tracker recompute function:
TypeError: Cannot read property 'instance' of undefined
at Blaze.View.<anonymous> (recorrido-mapa.js:28)
at blaze.js?hash=f33d3df…:1934
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3df…:3744)
at blaze.js?hash=f33d3df…:1932
at Object.Blaze._withCurrentView (blaze.js?hash=f33d3df…:2271)
at viewAutorun (blaze.js?hash=f33d3df…:1931)
at Tracker.Computation._compute (tracker.js?hash=9f8a0ce…:339)
at Tracker.Computation._recompute (tracker.js?hash=9f8a0ce…:358)
at Object.Tracker._runFlush (tracker.js?hash=9f8a0ce…:523)
at onGlobalMessage (meteor.js?hash=27829e9…:401)
recorrido.js
// Packages
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { GoogleMaps } from 'meteor/dburles:google-maps';
import './recorrido-mapa.html';
// Components
import '../../components/map/map.js';
import '../../components/linea-card/linea-card.js';
// Methods
import { getRecorrido } from '../../../api/recorridos/methods.js';
var idaPath, vueltaPath, map, IdaStartPoint, idaEndPoint, startMarker, endMarker;
Template.Recorrido_mapa.onCreated(function() {
var self = this;
self.autorun(() => {
var subscription = this.subscribe('recorridos');
console.log(subscription.ready());
if(subscription.ready()) {
// Obtenemos la linea de los queryParams y llamamos a metodo para obtener recorrido
linea = parseInt(FlowRouter.getQueryParam("linea"));
res = getRecorrido.call(linea);
// Si recibimos datos del metodo, instanciamos marcadores y polilineas para mapa
map = GoogleMaps.maps.colesMap.instance;
idaStartPoint = res.ida[0];
idaEndPoint = res.ida[res.ida.length - 1];
vueltaStartPoint = res.vuelta[res.vuelta.length - 1];
vueltaEndPoint = res.ida[0];
// Marker de start
startMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
label: "I"
});
startMarker.setMap(map);
//Marker de end
endMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
label: "F"
});
endMarker.setMap(map);
// Polilineas de recorrido
idaPath = new google.maps.Polyline({
path: res.ida,
geodesic: true,
strokeColor: '#26a69a',
strokeOpacity: 1.0,
strokeWeight: 3
});
vueltaPath = new google.maps.Polyline({
path: res.vuelta,
geodesic: true,
strokeColor: '#9d1322',
strokeOpacity: 1.0,
strokeWeight: 3
});
setIdaVuelta(idaStartPoint, idaEndPoint, idaPath, vueltaPath);
}
});
});
Template.Recorrido_mapa.events({
'change #switch-ida-vuelta': function(event) {
let checked = event.target.checked;
if(!checked)
setIdaVuelta(idaStartPoint, idaEndPoint, idaPath, vueltaPath);
else
setIdaVuelta(vueltaStartPoint, vueltaEndPoint, vueltaPath, idaPath);
}
});
function setIdaVuelta(startPoint, endPoint, pathShow, pathHide) {
startMarker.setPosition(startPoint);
endMarker.setPosition(endPoint);
pathShow.setMap(map);
pathHide.setMap(null);
}
这是标记:
recorridos.html
// Main Template
import './recorridos.html'
// Componentes
import '../../components/linea-card/linea-card.js'
// Methods
import { getLineas } from '../../../api/lineas/methods.js'
// Helpers
Template.Recorridos_page.helpers({
lineas() {
res = getLineas.call().fetch()
return res
}
})
Template.Linea_card.events({
"click .list": function(event, template) {
let l = template.data.lineas
FlowRouter.go('/recorridos/mapa?linea=' + l.numero)
}
})
Template.Recorridos_page.onCreated(function() {
this.autorun(() => {
this.subscribe('lineas')
})
})
recorridos-mapa.html
<template name="Recorridos_page">
{{> Navbar main_title="Recorridos"}}
<div style="padding-top: 60px; padding-bottom: 20px;">
{{#each l in lineas}}
{{> Linea_card notUnique=true lineas=l}}
{{/each}}
</div>
</template>
我真的很想知道为什么这个例子有时候会出现。
谢谢!
答案 0 :(得分:1)
<rss xmlns:media="http://search.yahoo.com/mrss/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
<channel>
<title>Testfeed</title>
<link>
http://someurl.com
</link>
<description>Test feed</description>
<language>en-US</language>
<copyright>Copyright (c) 2017</copyright>
<lastBuildDate>Thu, 04 May 2017 12:20:48 -0400</lastBuildDate>
<item>
<guid isPermaLink="true">
http://someurl.com
</guid>
<link>
http://someurl.com
</link>
<category>
<![CDATA[ somecategory ]]>
</category>
<category>
<![CDATA[ somesubcat ]]>
</category>
<author>
<![CDATA[ Michael Smith ]]>
</author>
</item>
</channel>
</rss>
是错误指向的位置。我猜想在完全启动/加载GoogleMaps.maps之前页面正在呈现。
如果您共享地图设置代码,我可能会给您一个具体的例子。