Question

当我尝试执行此功能时遇到问题。我要做的就是从Google的api中接收最近的地址。

我得到这个错误：

core.js:15723 ERROR TypeError: Cannot read property 'geometry' of undefined
at SafeSubscriber._next (coupon.service.ts:25)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)

api返回此json：

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI

这是包含从api获取“长纬度”的函数的服务：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { ApiResulte } from '../model/latlong.model';

@Injectable({
  providedIn: 'root'
})
export class CouponService {

  public myApi:ApiResulte;
  public lat:Number;
  public lng:Number;


  constructor(private myHttpClient:HttpClient) { 
    this.getLngLat();
  };

  public getLngLat(){
    this.myHttpClient.get<ApiResulte>('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI').subscribe(
      res=>{
        this.myApi=res
        this.lat = this.myApi.results[1].geometry.viewport.northeast.lat;
        this.lng = this.myApi.results[1].geometry.viewport.northeast.lng;
      },
      err=>{console.log(err)}
    );
  };
};

服务中使用的组件：

  import { Component, OnInit } from '@angular/core';
import { CouponService } from '../shered/services/coupon.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {


  constructor(public myService:CouponService) { }


  ngOnInit() { }

}

这是显示lng lat的html部分：

<p >
  The lat is: {{myService.lat}}<br>
  The long is: {{myService.lng}}
</p>

我在做什么错了？

Answer 1

此处Google API返回数组中的单个对象。数组索引从0开始，因此访问数组this.myApi.results[0]。请替换以下方法以解决您的问题。

  public getLngLat(){
    this.myHttpClient.get<ApiResulte>('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI').subscribe(
      res=>{
        this.myApi=res
        this.lat = this.myApi.results[0].geometry.viewport.northeast.lat;
        this.lng = this.myApi.results[0].geometry.viewport.northeast.lng;
      },
      err=>{console.log(err)}
    );
  };

希望获得帮助！

Answer 2

这是因为您的api返回的数组只有一个值。但是，您正在尝试通过提供this.myApi.results [1]来访问数组的第二个索引，该索引实际上并不存在。数组索引始终以0而不是1开头。希望这能解决您的问题。

    this.myApi=res
    this.lat = this.myApi.results[0].geometry.viewport.northeast.lat;
    this.lng = this.myApi.results[0].geometry.viewport.northeast.lng;

core.js：15723错误TypeError：无法读取未定义的属性“ OBJECT”

2 个答案: