如何使用 Google Maps API 获取所选地点的“经纬度”？

Question

我正在尝试使用 Google Maps API 服务来允许我的网站访问者在框中输入他们的地址。一旦他/她选择了匹配的地址，我想获取有关所提供地址的latitude 和longitude 信息。

使用API documentation 中的代码，我在我的网站上获得了一张地图和一个文本框。但是，一旦 Google 找到匹配的地址，我只需要获取所选地址的 latitude 和 longitude 信息。

这是初始化地图的函数

function initMap() {

    var mapElement = document.getElementById('map');

    var map = new google.maps.Map(mapElement, {
      center: {
        lat: -34.397, 
        lng: 150.644
      },
      zoom: 6
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map
    });

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {

      var places = searchBox.getPlaces();

      console.log(places);
      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {

        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        /*
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };
        */


        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          //icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        //coords.latitude

        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();  

        console.log(latitude, longitude);

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }

      });

      map.fitBounds(bounds);

    });


}

以下代码行提供了我正在寻找的信息。但是，它似乎不止一次显示它（可能它正在显示多个地址的信息）。 latitude 和 longitude 信息如何只获取一个地址？

   var latitude = place.geometry.location.lat();
   var longitude = place.geometry.location.lng();  

我尝试添加一个点击侦听器，我可以像这样在 lick 事件中获取信息

    map.addListener("click", function (event) {
        var lat = event.latLng.lat();
        var lng = event.latLng.lng();

        console.log(lat, lng);
    });

但是，这给了我我在地图上单击位置的latitude 和longitude，而不是我在自动填充建议匹配地址后从文本框中选择的地址

Answer 1

我确信有一种更简单的方法，但我使用 maps.google.com 并右键单击要查找坐标的位置并选择这里有什么？，然后选择经度和纬度将出现在地图底部。

Answer 2

使用 Google 的 API，您只需发送一个 AJAX 请求，您不需要在页面上使用地图来获取坐标。看看这个！

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

var responseAsObject;
$("#div").load( "url", function( response, status, xhr ) {
responseAsObject = $.parseJSON(response);
});
var long = responseAsObject.results.geometry.location.lng;
var lat = responseAsObject.results.geometry.location.lat;