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

我是JavaScript的新手,正在寻求实现Google提供的用于在您的位置放置标记的代码.但是,我想获取位置数据并在“ getCurrentPosition”块之外使用它.

我的第一步是使用lat和long作为该块外部的属性实例化一个Object,并将其作为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”对象时,“ pos.lat = position.coords.latitude”和“ pos.lng = position.coords.longitude”不会覆盖设置的属性值.

该地图不是以我当前的位置为中心,而是基于实例化时最初分配给“ pos”的占位符lat和long值.

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

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

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

但是,在实例化全局变量“ pos”时,标记将显示在原始的经纬度处,并被指定为占位符值.

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

解决方法:

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&ext=.js"></script>
<div id="map"></div>

proof of concept fiddle

标签：google-maps,google-maps-api-3,javascript
来源： https://codeday.me/bug/20191119/2034853.html