Angular 从api获取坐标并在谷歌地图中显示

我需要从给定的API中获取位置坐标，并在google地图中显示嵌入在angular 2中的页面中的区域。 到目前为止，我都是这样做的 MapComponent.ts

import { Component, OnInit } from '@angular/core';
import {DataService} from '../shared/DataService';
@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {
  lat: number;
    lng: number;
  constructor(private location:DataService) { }
loc:any;
  ngOnInit() {
    this.location.getDetails().subscribe((data)=>
  {
    this.lat=data.store.location[0];
    this.lng=data.store.location[1];
    console.log(this.lat+" "+this.lng);

  })
  }

}

MapComponent.html

<div class="container">

<sebm-google-map ([latitude])="lat"  ([longitude])="lng">
  <!-- <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker> -->
</sebm-google-map>
</div>

---

然而，我只是在地图区域得到蓝屏。当我将（[经度]）更改为[经度]时，我会得到一些城市。请帮助解释原因？

适用于您的语法，

[longitude]=“lng”

用于单向数据绑定-您正在告诉angular获取组件的“lng”属性中的值，并将其分配给地图组件的“longitude”输入

双向数据绑定的语法为

[（经度）]=“lng”

我不太确定编译器如何处理不起作用的语法，即

（[longitude]）=“lng”

（请注意，您将圆括号和方括号与有效的双向绑定语法进行了交换）

有关更详细的说明，请参阅