Google Maps API 返回空的纬度和经度

Question

我构建了一个简单的地图应用程序，如下面的代码所示。

长话短说，我收到了正确的 API 调用（名称、描述等），但我的 geometry.location.lat 和 geometry.location.long 似乎是空的（console.log 看看）。

（实际上，标记以正确的位置坐标出现，所以我很困惑）

<!DOCTYPE html>
<html>
<head>
  <title>My Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">

  <!-- Stylesheets. -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <h1 class="display-4">My Map</h1>
      </div>
    </div>
    <div class="row mb-2">
      <div class="col">
        <input class="form-control" id="search" type="text" placeholder="Search..." />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div id="map"></div>
      </div>
    </div>
  </div>

  <!-- Bootstrap scripts. -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <!-- Google Maps scripts. -->
  <script src="script.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<your api key>&libraries=places" async defer></script>
</body>
</html>

脚本.js

var map;

window.onload = () => {
    let method = 'dynamic';

    // if you want to statically add places, de-comment following line
    // method = 'static';

    if (method === 'static') {
        let places = staticLoadPlaces();
        renderPlaces(places);
    }

    if (method !== 'static') {

        // first get current user location
        return navigator.geolocation.getCurrentPosition(function (position) {

            console.log("Latitude: ", position.coords.latitude)
            console.log("Longitude: ", position.coords.longitude)

            // works
            var options = {
            center: { lat: position.coords.latitude, lng: position.coords.longitude },
            zoom: 100
            };

            var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            map = new google.maps.Map(document.getElementById('map'), options);

            var request = {
                location: myLocation,
                radius: '500',
                type: ['restaurant']
              };

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);


            ///////////////////////////////////////////
            // Search Function that is optional here //
            ///////////////////////////////////////////
            var input = document.getElementById('search');
            var searchBox = new google.maps.places.SearchBox(input);

            map.addListener('bounds_changed', function() {
            searchBox.setBounds(map.getBounds());
            });

            var markers = [];

            searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();

            if (places.length == 0)
                return;

            markers.forEach(function (m) { m.setMap(null); });
            markers = [];

            var bounds = new google.maps.LatLngBounds();
            places.forEach(function(p) {
                if (!p.geometry)
                return;

                markers.push(new google.maps.Marker({
                map: map,
                title: p.name,
                position: p.geometry.location
                }));

                if (p.geometry.viewport)
                bounds.union(p.geometry.viewport);
                else
                bounds.extend(p.geometry.location);
            });

            map.fitBounds(bounds);
            });

        },

        );
    }
};

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        var place = results[i];
        console.log(results[i]); // outputs for google maps js api
        console.log(results[i].name);
        console.log(results[i].geometry.location.lat);
        console.log(results[i].geometry.location.lng);
        createMarker(results[i]);
      }
    }
  }

function createMarker(result) {
    new google.maps.Marker({
        position: result.geometry.location,
        map: map
    });
}

Answer 1

LatLng.lat和LatLng.lng是函数。

    console.log(results[i].geometry.location.lat);
    console.log(results[i].geometry.location.lng);

要获取值，请调用它们：

    console.log(results[i].geometry.location.lat());
    console.log(results[i].geometry.location.lng());

Google Maps API 返回空的纬度和经度

问题描述

1 个解决方案

解决方案1
-1 已采纳 2020-01-12 13:13:40

Google Maps API 返回空的纬度和经度

问题描述

1 个解决方案

解决方案1 -1 已采纳 2020-01-12 13:13:40

解决方案1
-1 已采纳 2020-01-12 13:13:40