无法读取 属性 'panTo' of undefined' Angular 错误
Cannot read property 'panTo' of undefined' Angular error
我想在打开下拉菜单时平移到 AGM 地图上的某个城市。我通过在地图组件中制作此方法,然后从视图中调用它来完成此操作:
public move = () => {
alert("Test");
const position = new google.maps.LatLng( 52.379189, 4.899431);
this.map.panTo(position);
}
但是,我收到此错误消息:
Cannot read property 'panTo' of undefined'
谁能指出问题所在?
import {Component, OnInit} from "@angular/core";
import { GoogleMapsAPIWrapper } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { Observable, Observer } from 'rxjs';
import {GMapsService} from "./map.service";
import * as data from './inkomen.json';
import * as inbraakdata from '../../assets/output.json';
import * as data_latlon from './inkomen_latlon.json';
import * as inbraak_latlon from './output.json';
import {Http} from "@angular/http";
import 'rxjs/add/operator/map';
import {last} from "@angular/router/src/utils/collection";
import {DropdownModule} from "ngx-dropdown";
import {any} from "codelyzer/util/function";
@Component({
selector : 'googlemap',
templateUrl: 'maps.html',
styleUrls: ['map.component.css']
})
export class GoogleMapsComponent implements OnInit{
arr = [];
arr2 = [];
jsonLatlon
map: any;
jsonData
result
inkomen
count = 0;
results: any;
pages =['abc','bca','pqr'];
constructor(private http: Http, private mapservice: GMapsService) {
this.jsonData = data;
this.jsonLatlon = data_latlon
this.results = inbraak_latlon;
this.result = inbraak_latlon;
}
ngOnInit(){
console.log(this.jsonData)
console.log(this.jsonLatlon.data)
console.log(this.results)
this.convert()
}
convert(){
for(var i = 0; i < this.jsonData.length; i++){
var spl = this.jsonData[i].wijk.split(" ");
// this.getLatLon(this.jsonData[i].wijk, this.jsonData[i].stad,
this.jsonData[i].inkomen)
}
//this.showArr()
}
title: string = 'My first AGM project';
lat: number = 52.1941679;
lng: number = 4.6820146;
public move= () => {
alert("test");
const position = new google.maps.LatLng(52.379189, 4.899431);
this.map.panTo(position);
}
}
您的地图应该初始化为具有方法 .map,因为您已经在使用 @agm/core
您可以使用 GoogleMapsAPIWrapper
进口
import { AgmCoreModule, GoogleMapsAPIWrapper, AgmInfoWindow, AgmDataLayer, CircleManager, AgmCircle } from '@agm/core';
并参考
@ViewChild(GoogleMapsAPIWrapper) private gmapWrapper: GoogleMapsAPIWrapper;
你可以做到
this.gmapWrapper.panTo(position);
我想在打开下拉菜单时平移到 AGM 地图上的某个城市。我通过在地图组件中制作此方法,然后从视图中调用它来完成此操作:
public move = () => {
alert("Test");
const position = new google.maps.LatLng( 52.379189, 4.899431);
this.map.panTo(position);
}
但是,我收到此错误消息:
Cannot read property 'panTo' of undefined'
谁能指出问题所在?
import {Component, OnInit} from "@angular/core";
import { GoogleMapsAPIWrapper } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { Observable, Observer } from 'rxjs';
import {GMapsService} from "./map.service";
import * as data from './inkomen.json';
import * as inbraakdata from '../../assets/output.json';
import * as data_latlon from './inkomen_latlon.json';
import * as inbraak_latlon from './output.json';
import {Http} from "@angular/http";
import 'rxjs/add/operator/map';
import {last} from "@angular/router/src/utils/collection";
import {DropdownModule} from "ngx-dropdown";
import {any} from "codelyzer/util/function";
@Component({
selector : 'googlemap',
templateUrl: 'maps.html',
styleUrls: ['map.component.css']
})
export class GoogleMapsComponent implements OnInit{
arr = [];
arr2 = [];
jsonLatlon
map: any;
jsonData
result
inkomen
count = 0;
results: any;
pages =['abc','bca','pqr'];
constructor(private http: Http, private mapservice: GMapsService) {
this.jsonData = data;
this.jsonLatlon = data_latlon
this.results = inbraak_latlon;
this.result = inbraak_latlon;
}
ngOnInit(){
console.log(this.jsonData)
console.log(this.jsonLatlon.data)
console.log(this.results)
this.convert()
}
convert(){
for(var i = 0; i < this.jsonData.length; i++){
var spl = this.jsonData[i].wijk.split(" ");
// this.getLatLon(this.jsonData[i].wijk, this.jsonData[i].stad,
this.jsonData[i].inkomen)
}
//this.showArr()
}
title: string = 'My first AGM project';
lat: number = 52.1941679;
lng: number = 4.6820146;
public move= () => {
alert("test");
const position = new google.maps.LatLng(52.379189, 4.899431);
this.map.panTo(position);
}
}
您的地图应该初始化为具有方法 .map,因为您已经在使用 @agm/core
您可以使用 GoogleMapsAPIWrapper
进口
import { AgmCoreModule, GoogleMapsAPIWrapper, AgmInfoWindow, AgmDataLayer, CircleManager, AgmCircle } from '@agm/core';
并参考
@ViewChild(GoogleMapsAPIWrapper) private gmapWrapper: GoogleMapsAPIWrapper;
你可以做到
this.gmapWrapper.panTo(position);