JavaScript Google Maps API 如何将位置 lat/long 存储到全局变量

Question

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

我的第一个步骤是在块之外实例化一个具有 lat 和 long as 属性的对象，并将其作为 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”的占位符 lat 和 long 值。

当我更改为“navigator.geolocation.getCurrentPosition(function(position){ ... }",

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

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

但是，标记将显示在原始纬度经度处，当全局变量“pos”被实例化时，该纬度经度被分配为占位符值。

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

Answer 1

如果我理解正确的话……这应该可以。我添加了一个名为the_position 的全局变量，它在每次getCurrentPosition 调用时都被分配了一个新值。

var the_position = { // ADDED THIS
    lat: 0,
    lng: 0
}; 

function initMap() {

   ... all your current code

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

                                                 the_position.lat = position.coords.latitude; // ADDED THIS
                                                 the_position.lng = position.coords.longitude; // ADDED THIS

                                                 map.setCenter(pos);
                                                 }, function() {
                                                    handleLocationError(true, infoWindow, map.getCenter());
                                                 });
    }
    ... all your current code

}

然后，当您想检索最新的 lat/lng 时，只需使用...

// The Lat/Lng
var lat = the_position.lat;
var lng = the_position.lng;

Answer 2

getCurrentPosition 方法定义为（来自the documentation）：

navigator.geolocation.getCurrentPosition(success[, error[, options]])

参数

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

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

options - 可选 - 可选 PositionOptions 对象。

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

function(position, pos) {

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

function(position) {

代码 sn-p：

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);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

proof of concept fiddle