谷歌地图API从自动完成的经纬度没有地图

我试图从自动完成API谷歌地图获取经度和纬度,而不显示地图。 在我的脚本自动完成效果很好,但我无法获得经度和纬度。

<script type="text/javascript"> function initialize() { var options = { types: ['(cities)'] }; var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, options); } google.maps.event.addDomListener(window, 'load', initialize); var geocoder = new google.maps.Geocoder(); var address = autocomplete; 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(); alert(latitude); } }); </script> 

您可以使用下面的代码。

 <script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); document.getElementById('city2').value = place.name; document.getElementById('cityLat').value = place.geometry.location.lat(); document.getElementById('cityLng').value = place.geometry.location.lng(); //alert("This function is working!"); //alert(place.name); // alert(place.address_components[0].long_name); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> 

…这部分是在你的forms里面:

 <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> <input type="hidden" id="city2" name="city2" /> <input type="hidden" id="cityLat" name="cityLat" /> <input type="hidden" id="cityLng" name="cityLng" /> 

我希望它有帮助。

只需要:

 var place = autocomplete.getPlace(); // get lat var lat = place.geometry.location.lat(); // get lng var lng = place.geometry.location.lng(); 

您无法从自动填充API获取经度/纬度,因为Google通过该API生成的数据不包含纬度和经度字段。 例:-

 { "predictions" : [ { "description" : "IIT Mumbai, Mumbai, Maharashtra, India", "id" : "ac3235cda973818a89b5fe21ad0f5261ac9b6723", "matched_substrings" : [ { "length" : 10, "offset" : 0 } ], "reference" : "CkQ0AAAAHWg-RSngiYHHdz_yqyFKmfSoBwT-_PW0k8qQDhsbiVrk7BlPHCyJb58OthledMUTGYS5Vhec1Zj2L7w9Rq0zDxIQrbn05RX1QgWHkSXsmTk1TRoU45APW2BBRIUsA3t6XBy_8s0BPPA", "terms" : [ { "offset" : 0, "value" : "IIT Mumbai" }, { "offset" : 12, "value" : "Mumbai" }, { "offset" : 20, "value" : "Maharashtra" }, { "offset" : 33, "value" : "India" } ], "types" : [ "establishment", "geocode" ] } ], "status" : "OK" } 

您可以使用Google API从您的地址获取经度和纬度。 正如你已经说过的,你应该实现一个隐藏的字段,结果应该被插入。 然后,您可以将坐标与位置一起保存。

例如https://maps.googleapis.com/maps/api/geocode/json?address=IIT%20Area,%20Mumbai,%20Maharashtra,%20India&sensor=false

我最近在我的一个项目中实现了这个function:

 function getLatLngFromAddress(city, country){ var address = city +", "+ country; var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { $('#latitude').val(results[0].geometry.location.Pa); $('#longitude').val(results[0].geometry.location.Qa); } else { console.log("Geocode was not successful for the following reason: " + status); } }); } 

是的你可以:

 var place = autocomplete.getPlace(); document.getElementById('lat').value = place.geometry.location.lat(); document.getElementById('lon').value = place.geometry.location.lng(); 

Google Places API还提供了REST API,包括Places Autocomplete。 https://developers.google.com/places/documentation/autocomplete

但从服务中检索的数据必须用于地图。

你可以从相同的API获得,没有任何额外的API或URL调用。

HTML

 <input class="wd100" id="fromInput" type="text" name="grFrom" placeholder="From" required/> 

使用Javascript

 var input = document.getElementById('fromInput'); var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 1512631) ) var options = { bounds: defaultBounds } var autocomplete = new google.maps.places.Autocomplete(input, options); var searchBox = new google.maps.places.SearchBox(input, { bounds: defaultBounds }); google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); console.log(places[0].geometry.location.G); // Get Latitude console.log(places[0].geometry.location.K); // Get Longitude //Additional information console.log(places[0].formatted_address); // Formated Address of Place console.log(places[0].name); // Name of Place if (places.length == 0) { return; } var bounds = new google.maps.LatLngBounds(); console.log(bounds); }); } 
 @Override public void onPlaceSelected(Place place) { LatLng autoCompleteLatLng = place.getLatLng(); newLoc = new Location("New"); newLoc.setLatitude(autoCompleteLatLng.latitude); newLoc.setLongitude(autoCompleteLatLng.longitude); geoLocate(newLoc);//mark it in map }