【发布时间】：2014-01-21 20:45:35
【问题描述】：
如何使用谷歌地图位置搜索框 api 从搜索到的位置获取经度和纬度。
我使用与 google 演示相同的代码 - https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
【问题讨论】：
【发布时间】：2014-01-21 20:45:35
【问题描述】：
您提供的链接上的代码显示了输入搜索时要执行的功能。首先，它创建一个空的标记数组（执行搜索后您在地图上看到的图钉）。
所以，检查以：
开头的函数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 地图位置对象。你可以使用place.geometry.location.lat() 和place.geometry.location.lng()。
【讨论】：
-
真的在为此苦苦挣扎，这是关键，陈述清楚并且在听众中可用。
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();
}
});
}
你可以使用上面的函数，它会给你用户输入区域的纬度和经度。
【讨论】：
-
几天来一直在寻找如何做到这一点，人们不断地指出我要使用 googe.maps.places.placesservice.getPlaceDetails() 函数。现在我知道它是我一直需要的地理编码器！如果我几天前找到这个答案就好了！您可以使用自动完成功能并向其添加事件侦听器以用于更改事件，然后从该列表中获取位置，但这是一个更简单的解决方案，尤其是在使用 Angular 应用程序时。这应该标记为我眼中的答案
来自docs：
// 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());
});
【讨论】：
navigator.geolocation.getCurrentPosition(success => {
console.log(success) // `have the lat and long`
}, failure =>{
//`enter code here if failed`
});
【讨论】：
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>
【讨论】：