2016-08-22 137 views
0

我使用angular2以打字稿及angular2,谷歌地图,遗漏的类型错误:无法读取空的特性“EA”

以下是在的package.json文件中找到的相关性:

“angular2 -Google-地图“:‘^ 0.12.0’

它几乎运行得很好没有问题,但我面对这个例外通过地图导航时:

Uncaught TypeError: Cannot read property 'ea' of null

enter image description here

任何想法如何解决它?

回答

0

我们无法真正诊断您未发布的代码。但是,我可以在某种程度上解释错误消息。在代码内某处,有一个对象的引用(我们称之为obj)及其属性(又名属性或字段)ea。例如,

x = obj.ea 

执行当得任何声明作出参考,OBJ。空物体很无聊;除其他外,他们没有财产。 :-)

您需要通过读取堆栈跟踪来找到发生错误的位置,跟踪对象的值,并找出为什么它应该有更有用的值时为null

+0

为了更清楚地了解我的情况,请尝试以下网址:http://plnkr.co/edit/YX7W20?p=preview 打开控制台并在那里导航地图,您将看到该错误。 你知不知道为什么会这样? 我认为它来自图书馆angular2-google-maps。 –

+0

我没有得到错误。我转换了观点,将地图滑到了不同的地方,将点“A”拖到萨尔茨堡,并在某个家庭的内部偷看。 – Prune

+0

尝试快速浏览它,而不用触摸任何标记。按住鼠标并移动它。顺便说一下你用什么浏览器? –

0

我的问题是完全一样的,只有当我点击&时,只有鼠标悬停在地图上并开始拖动时才会出现此错误。在地图内或标记上放大或单击时,不会发生拖放/平移。 发布代码并不是什么大事,因为它是我们所有人都可以使用的Angular 2 Google Map示例,并且不会改变发生的任何事情。当然,我已经通过输入值测试了最简单的配置,但仍然发生。无论如何,这是代码。 模板:

<h1>Sample Angular 2 Google Maps App</h1> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-5"> 
     <section widget class="widget"> 
     <p>Vivamus hendrerit arcu sed erat molestie vehicula....</p> 
     </section> 
    </div> 
    <div class="col-md-7"> 
     <div id="my-google-map"> 
     <sebm-google-map 
      [latitude]="lat" 
      [longitude]="lng" 
      [zoom]="zoom" 
      [disableDefaultUI]="false" 
      [zoomControl]="true"> 
      <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index" 
      (markerClick)="clickedMarker(m.label, i)" 
      [latitude]="m.lat" 
      [longitude]="m.lng" 
      [label]="m.label" 
      [markerDraggable]="false"> 
      </sebm-google-map-marker> 
     </sebm-google-map> 
     </div> 
    </div> 
    </div> 
</div> 

这里是组件:

import {Component, OnInit, AfterContentInit} from '@angular/core'; 
import {ElementRef, ViewEncapsulation} from '@angular/core'; 
import {GOOGLE_MAPS_DIRECTIVES, 
     GOOGLE_MAPS_PROVIDERS, 
     provideLazyMapsAPILoaderConfig, 
     GoogleMapsAPIWrapper} from 'angular2-google-maps/core'; 

// just an interface for type safety. 
interface Marker { 
    lat: number; 
    lng: number; 
    label?: string; 
} 
interface Bounds { 
    sw: Marker; 
    ne: Marker; 
} 

@Component({ 
    selector: 'myapp', 
    template: require('./dashboard.html'), 
    styles: ['sebm-google-map { height: 100% }', '#my-google-map { height: 600px;}'], 
    directives: [ 
    GOOGLE_MAPS_DIRECTIVES 
    ], 
    encapsulation: ViewEncapsulation.None, 
    providers: [ GOOGLE_MAPS_PROVIDERS, provideLazyMapsAPILoaderConfig({ 
    apiKey: '.... key ....' 
    })], 

}) 

export class Dashboard implements OnInit, AfterContentInit { 
    // GoogleMaps related 
    lat: number = 25.906032; 
    lng: number = -80.255876; 
    zoom: number = 12; 
    latMin: number = 0; 
    latMax: number = 0; 
    lngMin: number = 0; 
    lngMax: number = 0; 
    $el: any; 
    $mapDiv: any; 
    mapPixelDimensions: any; 
    bounds: Bounds; 
    markers: Marker[] = [ 
    { 
     lat: 25.801553, 
     lng: -80.247964, 
     label: '78' 
    },{ 
     lat: 25.810098, 
     lng: -80.240513, 
     label: '66' 
    },{ 
     lat: 25.822982, 
     lng: -80.215868, 
     label: '59' 
    } 
    ]; 

    constructor (
    el: ElementRef) { 
    this.$el = jQuery(el.nativeElement); 
    this.$mapDiv = this.$el.find('#my-google-map'); 
    } 

    ngOnInit() { 
    this.recalculateMapPosition(); 
    } 

    ngAfterContentInit() { 
    this.recalculateMapPosition(); 
    } 

    recalculateMapPosition() { 
    this.mapPixelDimensions = { 
     height: this.$mapDiv.height(), 
     width: this.$mapDiv.width() 
    }; 
    for (var coord of this.markers) { 
     if (this.latMin == 0) { this.latMin = this.markers[0].lat; } 
     if (this.lngMax == 0) { this.lngMax = this.markers[0].lng; } 
     // Test for minimum and maximum latitude 
     if (coord.lat < this.latMin) { this.latMin = coord.lat; } 
     if (coord.lat > this.latMax) { this.latMax = coord.lat; } 
     // same for longitude 
     if (coord.lng < this.lngMin) { this.lngMin = coord.lng; } 
     if (coord.lng > this.lngMax) { this.lngMax = coord.lng; } 
    } 
    this.lat = this.latMin + Math.abs(this.latMax - this.latMin); 
    this.lng = this.lngMin + Math.abs(this.lngMax - this.lngMin); 
    this.bounds = { 
     ne: {lat: this.latMax, lng: this.lngMax}, 
     sw: {lat: this.latMin, lng: this.lngMin} 
    }; 
    this.zoom = this.getZoom(this.bounds, this.mapPixelDimensions.width); 
    console.log('zoom: ', this.zoom); 
    } 

    clickedMarker(label: string, index: number) { 
    console.log(`clicked the marker: ${label || index}`); 
    } 

    getZoom(bounds, dimm) { 
    var GLOBE_WIDTH = 256; // a constant in Google's map projection 
    var west = bounds.sw.lng; 
    var east = bounds.ne.lng; 
    var angle = east - west; 
    if (angle < 0) { 
     angle += 360; 
    } 
    var zoom = Math.round(Math.log(dimm * 360/angle/GLOBE_WIDTH)/Math.LN2); 
    return zoom - 2; 
    } 

} 

我与Firefox 49.0.2测试,它没有发生。 它发生在54.0.2840.71(64位) 未在Safari上测试。

相关问题