Google地图：无法获取未定义或空引用的属性“lat”

I'm trying to get the coordinates value of user's marker but for some reason the marker doesn't have lat and lng?! Error in console says: Unable to get property 'lat' of undefined or null reference. Why isn't my code working? I just want to save the coordinates in two hidden inputs in order to get them in PHP $_POST later.

我正在尝试获取用户标记的坐标值，但由于某种原因，标记没有lat和lng？！控制台出错：无法获取未定义或空引用的属性“lat”。为什么我的代码不起作用？我只想将坐标保存在两个隐藏的输入中，以便稍后在PHP $ _POST中获取它们。

html

HTML

                <div class="">
                    <input id="ciudad" name="ciudad" class="ciudad" type="text"
                           placeholder="Ciudad" ng-model="ciudad" required>
                    <div id="map"></div>
                    <input type="hidden" id="distance" size="31" value="31">
                    <input type="hidden" id="lat" value="">
                    <input type="hidden" id="lng" value="">
                </div>

js

JS

// GOOGLE MAP
function initMap() {

    // MAP
    var map = new google.maps.Map(document.getElementById('map'),
        {
            center: { lat: 40.3302959, lng: -3.7387955 },
            zoom: 5
        });


    var locationInput = document.getElementById('ciudad');
    var autocomplete = new google.maps.places.Autocomplete(locationInput);
    autocomplete.bindTo('bounds', map);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(locationInput);

    // MARKER
    var marker = new google.maps.Marker({
        map: map
    });


    var searchArea = '';

    // CIRCLE
    var circle = new google.maps.Circle({
        radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
        strokeColor: "#7ED9C3",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#7ED9C3',
        fillOpacity: 0.4
    });
    circle.setMap(null);

    // PLACE CHANGED FUNCTION
    autocomplete.addListener('place_changed',
        function () {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
                map.setZoom(9);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(9);
            }

            var service = new google.maps.places.PlacesService(map);

            // Set the position of the marker using the place ID and location.
            searchArea = place.geometry.location;
            marker.setPlace({
                placeId: place.place_id,
                location: place.geometry.location
            });

        // Coordinates
                marker.position = marker.getPosition();
        var lat = marker.position.lat().toFixed(6);
        var lng = marker.position.lng().toFixed(6);
        getCoords(lat, lng);


            // Clear last circle
            circle.setMap(null);

            // Draw a circle around the radius
            circle = new google.maps.Circle({
                center: searchArea,
                radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
                strokeColor: "#7ED9C3",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#7ED9C3',
                fillOpacity: 0.4
            });
            circle.setMap(map);

            // Perform search over radius
            var request = {
                location: map,
                radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
                keyword: "coffee",
                rankBy: google.maps.places.RankBy.PROMINENCE
            };

            service.nearbySearch(request, searchArea);
        });

        // COORDINATES
        function getCoords(lat, lng) {

           // Reference input html element with id=”lat”.
           var coords_lat = document.getElementById('lat');

           // Update latitude text box.
           coords_lat.value = lat;

           // Reference input html element with id=”lng”.
           var coords_lng = document.getElementById('lng');

           // Update longitude text box.
           coords_lng.value = lng;
        }
}

2 个解决方案

#1

You are passing in an invalid center to google.maps.Circle

您将无效的中心传递给google.maps.Circle

center needs to be a google.maps.LatLng object or a LatLng Object Literal

center需要是google.maps.LatLng对象或LatLng对象文字

var searchArea = '';

// CIRCLE
var circle = new google.maps.Circle({
    center: searchArea,

Just leave out your center entirely at this point in your code, because you are calling setCenter on your cicle below when you get your result anyway.

只需在代码中完全忽略您的中心，因为无论如何，当您获得结果时，您将在下面的cicle上调用setCenter。

Edit

编辑

Your error is coming from these lines:

您的错误来自以下几行：

marker.position = marker.getPosition();
var lat = marker.position.lat().toFixed(6);
var lng = marker.position.lng().toFixed(6);
getCoords(lat, lng);

You're doing a bunch of unnecessary stuff. You already have the lat and lng from place.geometry.location so remove all that stuff replace it with:

你正在做一堆不必要的东西。你已经有了place.geometry.location的lat和lng，所以删除所有的东西替换它：

getCoords(place.geometry.location.lat(),place.geometry.location.lng());

This line:

这一行：

marker.position = marker.getPosition()

is very confusing (and is returning null). But I'm also assuming that google doesn't return a LatLng object from marker.getPosition() if you use market.setPlace() to position the marker instead of market.setPosition(). In any case, you don't need it.

非常混乱（并返回null）。但我也假设如果你使用market.setPlace（）来定位标记而不是market.setPosition（），谷歌不会从marker.getPosition（）返回LatLng对象。无论如何，你不需要它。

#2

You are using marker.setPlace to define the marker's location. Apparently when you do that marker.getPosition returns undefined. You can get the location you set by using marker.getPlace().location.

您正在使用marker.setPlace来定义标记的位置。显然，当你做那个marker.getPosition返回undefined。您可以使用marker.getPlace（）。location来获取您设置的位置。

  // Coordinates
  var latLng = marker.getPlace().location;
  var lat = latLng.lat().toFixed(6);
  var lng = latLng.lng().toFixed(6);

(you also have some other errors downstream in your code, i.e. searchArea is not a function)

（您的代码下游还有一些其他错误，即searchArea不是函数）

proof of concept fiddle

概念证明小提琴

**code snippet:*

**代码段：*

// GOOGLE MAP
var map;

function initMap() {

  // MAP
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.3302959,
      lng: -3.7387955
    },
    zoom: 5
  });


  var locationInput = document.getElementById('ciudad');
  var autocomplete = new google.maps.places.Autocomplete(locationInput);
  autocomplete.bindTo('bounds', map);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(locationInput);

  // MARKER
  var marker = new google.maps.Marker({
    map: map
  });


  var searchArea = '';

  // CIRCLE
  var circle = new google.maps.Circle({
    // center: searchArea,
    radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
    strokeColor: "#7ED9C3",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#7ED9C3',
    fillOpacity: 0.4
  });
  circle.setMap(null);

  // PLACE CHANGED FUNCTION
  autocomplete.addListener('place_changed',
    function() {
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        return;
      }

      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
        map.setZoom(9);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(9);
      }

      var service = new google.maps.places.PlacesService(map);

      // Set the position of the marker using the place ID and location.
      searchArea = place.geometry.location;
      marker.setPlace({
        placeId: place.place_id,
        location: place.geometry.location
      });

      // Coordinates
      var latLng = marker.getPlace().location;
      var lat = latLng.lat().toFixed(6);
      var lng = latLng.lng().toFixed(6);
      getCoords(lat, lng);


      // Clear last circle
      circle.setMap(null);

      // Draw a circle around the radius
      circle = new google.maps.Circle({
        center: searchArea,
        radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
        strokeColor: "#7ED9C3",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#7ED9C3',
        fillOpacity: 0.4
      });
      circle.setMap(map);

      // Perform search over radius
      var request = {
        location: searchArea,
        radius: parseFloat(document.getElementById("distance").value) * 1609.3, //convert miles to meters
        keyword: "coffee",
        rankBy: google.maps.places.RankBy.PROMINENCE
      };

      service.nearbySearch(request, callback);
    });

  // COORDINATES
  function getCoords(lat, lng) {

    // Reference input html element with id=”lat”.
    var coords_lat = document.getElementById('lat');

    // Update latitude text box.
    coords_lat.value = lat;

    // Reference input html element with id=”lng”.
    var coords_lng = document.getElementById('lng');

    // Update longitude text box.
    coords_lng.value = lng;
  }
}
google.maps.event.addDomListener(window, "load", initMap);

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

html,
body,
#map,
.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 class="map">
  <input id="ciudad" name="ciudad" class="ciudad" type="text" placeholder="Ciudad" ng-model="ciudad" required>
  <div id="map"></div>
  <input type="hidden" id="distance" size="31" value="31">
  <input type="hidden" id="lat" value="">
  <input type="hidden" id="lng" value="">
</div>