JavaScript Google Maps API 如何将位置纬度/经度存储到全局变量

Question

我是 JavaScript 新手，希望实现 Google 提供的代码，以便在您的位置放置标记。但是，我想获取位置数据并在“getCurrentPosition”块之外使用它。

我的第一遍是实例化一个对象，其中纬度和经度作为块外部的属性，并将其作为 getCurrentPosition 内部函数的参数：

function initMap() {

    var pos = {
        lat: 42.1,
        lng: -74.1
    };

    var map = new google.maps.Map(document.getElementById('map'), {
                                  center: {lat: 42, lng: -74},
                                  zoom: 6
                                  });
    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position, pos) {
                                                 pos.lat = position.coords.latitude;
                                                 pos.lng = position.coords.longitude;

                                                 map.setCenter(pos);
                                                 }, function() {
                                                    handleLocationError(true, infoWindow, map.getCenter());
                                                 });
    } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }

    var marker = new google.maps.Marker({
                                        position: pos,
                                        map: map,
                                        title: 'Release Source'
                                        });

}

这样做的效果是标记将位于实例化对象时指定的位置。这些是占位符值，因为我当前的位置距离几个州很远。

“pos.lat =position.coords.latitude”和“pos.lng =position.coords.longitude”不会覆盖实例化全局“pos”对象时设置的属性值。

地图不是以我当前位置为中心，而是基于实例化时最初分配给“pos”的占位符纬度和经度值。

当我更改为“navigator.geolocation.getCurrentPosition(function(position) { ... }”时，

这将删除对“getCurrentPosition”块内的全局“pos”变量的引用。似乎创建了一个名为“pos”的局部变量。

块内“pos”的本地实例将根据我当前的位置分配其纬度和经度。然后，按照区块中的说明，地图以我当前的位置为中心。

然而，标记将显示在原始经纬度处，当实例化全局变量“pos”时，这些经度值被指定为占位符值。

请让我知道如何获取“getCurrentPosition”块之外的当前纬度/经度值数据并进入全局“pos”对象。

Answer 1

getCurrentPosition 方法定义为（来自文档）：

navigator.geolocation.getCurrentPosition(成功[,错误[,选项]])

参数

success - 将 Position 对象作为其唯一输入参数的回调函数。

error - 可选 - 一个可选的回调函数，它将 PositionError 对象作为其唯一的输入参数。

options - 可选 - 可选的 PositionOptions 对象。

您使用它的方式会导致pos创建一个局部变量（值为 null）。

function(position, pos) {

只需使用单个参数创建函数签名：

function(position) {

代码片段：

function(position, pos) {

function(position) {

function initMap() {
  var infoWindow = new google.maps.InfoWindow();
  var pos = {
    lat: 42.1,
    lng: -74.1
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 42,
      lng: -74
    },
    zoom: 6
  });

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos.lat = position.coords.latitude;
      pos.lng = position.coords.longitude;

      map.setCenter(pos);
      var marker = new google.maps.Marker({
        position: pos,
        map: map,
        title: 'Release Source'
      });
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter(), map);
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter(), map);
  }

  function handleLocationError(input, infoWindow, center, map) {
    infoWindow.setContent("ERROR: " + input);
    infoWindow.setPosition(center);
    infoWindow.open(map);
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

概念证明小提琴