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

Question

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

我的第一步是在 block 外实例化一个具有 lat 和 long 属性的对象，并将其作为 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”对象时设置的属性值。

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

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

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

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

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

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

Answer 1

getCurrentPosition 方法定义为(来自 the documentation ):

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

Parameters

success - A callback function that takes a Position object as its sole input parameter.

error - Optional - An optional callback function that takes a PositionError object as its sole input parameter.

options - Optional - An optional PositionOptions object.

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

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

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