如何使用Google Maps API獲取所選地點的“緯度和經度”？

Question

我正在嘗試使用Google Maps API服務，以允許我的網站訪問者在一個框中輸入他們的地址。 一旦他/她選擇了匹配的地址，我想獲得有關提供的地址的latitude和longitude信息。

使用API文檔中的代碼，我的網站上有一個地圖和一個文本框。 但是，一旦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();  

我嘗試添加一個點擊監聽器，我可以抓住這個舔事件的信息

    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;