Question

我在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>

我真的很想知道为什么这个例子有时候会出现。

谢谢！

Answer 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之前页面正在呈现。

如果您共享地图设置代码，我可能会给您一个具体的例子。

＆＃34; Tracker重新计算功能的例外：无法读取属性＆＃39;实例＆＃39;未定义＆＃34; - 流星和谷歌地图

1 个答案: