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

时间:2017-05-01 18:10:48

标签: angular

我需要从给定的API获取位置坐标,并在我的页面中以角度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>

但是我只是在地图区域获得蓝屏。当我改变([经度])到[经度]然后我得到一些城市。请帮忙,为什么会这样?

1 个答案:

答案 0 :(得分:0)

适合您的语法,[longitude]="lng"用于单向数据绑定 - 您告诉angular获取组件的“lng”属性中的值,并将其分配给地图组件的“经度” “输入。

双向数据绑定的语法是[(longitude)]="lng"

我不太清楚编译器对你的语法不起作用,即([longitude])="lng"(注意你有一个圆形和方括号与有效的双向绑定语法交换)

有关更详细的说明,请参阅https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding