使用 Javascript 從 Google Places 搜索 API 獲取緯度和經度

Question

如何使用谷歌地圖位置搜索框 api 從搜索位置獲取經度和緯度。

我使用與谷歌演示相同的代碼 - https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Answer 1

function GetLatlong() {
  var geocoder = new google.maps.Geocoder();
  var address = document.getElementById('textboxid').value;

  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
    }
  });
}

您可以使用上述功能，該功能將為您提供用戶輸入區域的緯度和經度。

Answer 2

您提供的鏈接上的代碼顯示了輸入搜索時要執行的功能。 首先，它創建一個空的標記數組（執行搜索后在地圖上看到的圖釘）。

因此，檢查以以下開頭的函數：

google.maps.event.addListener(searchBox, 'places_changed', function() {

稍后您將看到已創建一個標記（甚至還有評論）：

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

因此，在place.geometry.location您有一個 Google Maps Location 對象。 您可以使用place.geometry.location.lat()和place.geometry.location.lng() 。

也可以在這里查看： https : //stackoverflow.com/a/15315483/1012139

Answer 3

從文檔：

// Autocomplete Options
var defaultBounds = new google.maps.LatLngBounds();
var options = {
  types: ['(cities)'],
  bounds: defaultBounds
};

// get DOM's input element
var input = document.getElementById('location_address');

// Make Autocomplete instance
var autocomplete = new google.maps.places.Autocomplete(input, options);

// Listener for whenever input value changes            
autocomplete.addListener('place_changed', function() {

  // Get place info
  var place = autocomplete.getPlace();

  // Do whatever with the value!
  console.log(place.geometry.location.lat());
});

Answer 4

我想您可能想要查看Google地圖地理編碼服務

Answer 5

HTML：

<input type="text" id="address" name="address" value=""> //Autocomplete input address

<input type="hidden" name="s_latitude" id="s_latitude" value="" /> //get latitude
<input type="hidden" name="s_longitude" id="s_longitude" value="" /> //get longitude

Javascript：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"
async defer></script>

<script>
var input = document.getElementById('address');
var originLatitude = document.getElementById('s_latitude');
var originLongitude = document.getElementById('s_longitude');

var originAutocomplete = new google.maps.places.Autocomplete(input);

    
originAutocomplete.addListener('place_changed', function(event) {
    var place = originAutocomplete.getPlace();

    if (place.hasOwnProperty('place_id')) {
        if (!place.geometry) {
                // window.alert("Autocomplete's returned place contains no geometry");
                return;
        }
        originLatitude.value = place.geometry.location.lat();
        originLongitude.value = place.geometry.location.lng();
    } else {
        service.textSearch({
                query: place.name
        }, function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                originLatitude.value = results[0].geometry.location.lat();
                originLongitude.value = results[0].geometry.location.lng();
            }
        });
    }
});
</script>

Answer 6

navigator.geolocation.getCurrentPosition(success => {

  console.log(success) // `have the lat and long`

}, failure =>{

//`enter code here if failed`

});