角2地理定位

Noa*_*ton 7 geolocation angular

我想在加载我的角度2应用程序时获得地理位置(经度和纬度),并将其设置为变量,位置.我该怎么做呢?这是app.component:

import { Component, OnInit} from '@angular/core';
@Component({
     moduleId: module.id,
     selector: 'app-root',
     template: `
     <h2>{{location.latitude}}</h2>
     `
     })

export class AppComponent implements OnInit{
   location = {};
   setPosition(position){
      this.location = position.coords;
      console.log(position.coords);
      }
ngOnInit(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(this.setPosition);
      };
   }
 }
Run Code Online (Sandbox Code Playgroud)

当我打印position.coords时,它就出来了.但它似乎没有设置this.location.谢谢.

Arp*_*wal 8

我假设您推断它没有设置this.location,因为您的UI未更新.通过在setPosition中添加另一个控制台日志来确认是否正在设置this.location.

  console.log(this.location);
Run Code Online (Sandbox Code Playgroud)

我认为它会被设置,但UI不是更新是你的问题.只是为了启动你可以尝试包装在超时中设置的位置,看看UI更新是否像

setTimeout( position => this.location = position.coords, 0);
Run Code Online (Sandbox Code Playgroud)

如果这让你工作,那么你设置变量太早/太晚,无法进行变化检测.您应该将setPosition的代码从ngOnInit更好的生命周期钩子移动到' ngAfterViewChecked'或' ngDoCheck',但是这个函数将被多次调用,所以你只需要设置一次你的工作

ngOnInit(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(this.setPosition.bind(this));
      };
   }
 }
Run Code Online (Sandbox Code Playgroud)

Bing将返回一个绑定函数,其中上下文将被固定为传递为 argument

  • 看我的编辑.你应该使用绑定功能 (2认同)

小智 8

试试这个:

ngOnInit(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(position => {
        this.location = position.coords;
        console.log(position.coords); 
      });
   }
 }
Run Code Online (Sandbox Code Playgroud)