Angular 2中地理坐标无法存入变量，请求解决经纬度存储与显示问题

嘿，这个问题我太熟了！核心原因就是回调函数里的this指向不对。当你把this.showPosition传给navigator.geolocation.getCurrentPosition时，这个回调函数执行时的this已经不是你的Angular组件实例了，而是绑定到了navigator.geolocation的上下文，所以你给this.lat和this.lng赋值根本没作用到组件的变量上。

给你三种简单的解决办法，任选其一就行：

方法一：用箭头函数传递回调（最推荐） #

箭头函数会自动继承当前上下文的this，也就是你的组件实例，这样就能正确赋值了：

lat; lng;

getLocation() { 
  if (navigator.geolocation) { 
    // 用箭头函数包裹，确保this指向组件
    navigator.geolocation.getCurrentPosition((position) => this.showPosition(position)); 
  } else { 
    alert("Geolocation is not supported by this browser."); 
  } 
}

showPosition(position) { 
  console.log(`Latitude: ${position.coords.latitude} Longitude: ${position.coords.longitude}`); 
  this.lat = position.coords.latitude; 
  this.lng = position.coords.longitude; 
  console.log(this.lat); // 现在这里能正确打印组件的lat变量了
}

方法二：用bind(this)强制绑定上下文 #

直接给回调函数绑定组件的this，确保执行时上下文正确：

lat; lng;

getLocation() { 
  if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(this.showPosition.bind(this)); 
  } else { 
    alert("Geolocation is not supported by this browser."); 
  } 
}

showPosition(position) { 
  console.log(`Latitude: ${position.coords.latitude} Longitude: ${position.coords.longitude}`); 
  this.lat = position.coords.latitude; 
  this.lng = position.coords.longitude; 
  console.log(this.lat); 
}

方法三：提前保存组件的this到变量 #

在getLocation里先把组件的this存到一个变量（比如self），然后在回调里用这个变量调用方法：

lat; lng;

getLocation() { 
  const self = this; // 保存组件的this引用
  if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
      self.showPosition(position); // 用self确保上下文正确
    }); 
  } else { 
    alert("Geolocation is not supported by this browser."); 
  } 
}

showPosition(position) { 
  console.log(`Latitude: ${position.coords.latitude} Longitude: ${position.coords.longitude}`); 
  this.lat = position.coords.latitude; 
  this.lng = position.coords.longitude; 
  console.log(this.lat); 
}

最后别忘了在组件初始化时调用getLocation，比如在ngOnInit钩子里面：

import { OnInit } from '@angular/core';

// 组件类要实现OnInit
export class YourComponent implements OnInit {
  lat; lng;

  ngOnInit() {
    this.getLocation(); // 页面加载时获取位置
  }

  // 上面的getLocation和showPosition方法放在这里
}

模板里直接用插值表达式显示变量就行：

<div class="location-info">
  当前纬度：{{ lat }}<br>
  当前经度：{{ lng }}
</div>

内容的提问来源于stack exchange，提问作者Krunal Patel