Google maps API autocomplete.getPlace（）不一致地返回几何图形 [英] Google maps API autocomplete.getPlace() inconsistently returns geometry
问题描述
autocomplete.getPlace（）;
当我尝试使用它的一半时间时，它表示几何为空
和一半它的工作原理...
无法解决这个问题......我唯一的想法是我的代码在getPlace（）返回之前继续前进，但我不是确定如何等待它完成？
我的图书馆包括...
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=MyKey&libraries=imagery,places ，几何>
< / script>
创建自动填充...
this.autocomplete = null;
$ scope.initAutoComplete = function（）{
//创建自动填充对象，将搜索限制为地理区域
//位置类型。
webMapValues.autocomplete = new google.maps.places.Autocomplete（/ ** @type {！HTMLInputElement} * /（document.getElementById（'autocomplete'）），{
types： ['geocode']
}）;
//当用户从下拉列表中选择一个地址时，填写表单中的地址
//字段。
webMapValues.autocomplete.addListener（'place_changed'，rcisMapService.dropPin）;
};
我的DropPin函数...
mapSVC.dropPin = function（）{
var place = webMapValues.autocomplete.getPlace（）;
webMapValues.mapObj.getView（）。setCenter（ol.proj.transform（[place.geometry.location.lng（），place.geometry.location.lat（）]，'EPSG：4326 '，'EPSG：3857'））;
webMapValues.mapObj.getView（）。setZoom（17）;
webMapValues.marker = new google.maps.Marker（{
map：webMapValues.gmapObj，
anchorPoint：new google.maps.Point（0，-29）
}） ;
webMapValues.marker.setIcon（/ ** @type {google.maps.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（35，35）
}））;
webMapValues.marker.setPosition（place.geometry.location）;
webMapValues.marker.setVisible（true）;
};
自动完成功能很好，但当我调用getPlace（）
一半的时间......
下面一行中的几何体未定义。
place.geometry.location.lng（）
您可以提供的任何帮助非常感谢!!
好的，这是一个非常难以解决的问题，因为原因并不明显... autoComplete.getPlace（）会在第一次调用它时返回'undefined'在每个新地址上。
我仍然不确定为什么发生这种情况，谷歌也没有，因为我使用我们的谷歌云支持来查看他们是否有任何想法，他们没有。
下面是我提出的解决方案...
基本上在我上面代码的创建自动完成部分中，我放弃了自动完成并将其替换为谷歌。 maps.places。
请务必在您的Google API调用中添加地点...
< script async defer src =https://maps.googleapis.com/maps/api/js?key=YourKey&libraries=imagery,places>
这就是它的样子......
$ scope.initAutoComplete = function（）{
//获取用于地址或地点搜索的文本框
var input = document.getElementById（ '自动完成'）;
//创建google地方变量并将输入绑定到它。
var searchBox = new google.maps.places.SearchBox（input）;
//当用户从下拉菜单中选择一个地址时，
触发函数
searchBox.addListener（'places_changed'，function（）{
//调用getPlaces而不是get place（）
var place = searchBox.getPlaces（）;
//传递位置给我的dropPin服务
rcisMapService .dropPin（place）;
}）;
};
我还将class =controls添加到了用于地址/地点搜索的地方。 b
$ b
此解决方案每次都会一直返回。
I'm using GoogleMaps Autocomplete in an AngularJS application and when I call...
autocomplete.getPlace();
half the time when i try to use place it says geometry is null and half the time it works...
Cant seem to figure it out...my only idea is that my code is moving on before getPlace() returns but i'm not sure how to wait for it to get done?
My library include...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKey&libraries=imagery,places,geometry">
</script>
Creating autocomplete...
this.autocomplete = null;
$scope.initAutoComplete = function() {
// Create the autocomplete object, restricting the search to geographical
// location types.
webMapValues.autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */ (document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
webMapValues.autocomplete.addListener('place_changed', rcisMapService.dropPin);
};
My DropPin function...
mapSVC.dropPin = function() {
var place = webMapValues.autocomplete.getPlace();
webMapValues.mapObj.getView().setCenter(ol.proj.transform([place.geometry.location.lng(), place.geometry.location.lat()], 'EPSG:4326', 'EPSG:3857'));
webMapValues.mapObj.getView().setZoom(17);
webMapValues.marker = new google.maps.Marker({
map: webMapValues.gmapObj,
anchorPoint: new google.maps.Point(0, -29)
});
webMapValues.marker.setIcon( /** @type {google.maps.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(35, 35)
}));
webMapValues.marker.setPosition(place.geometry.location);
webMapValues.marker.setVisible(true);
};
autocomplete is working great, but when I call "getPlace()"
half the time...
"geometry" in the below line is not defined. place.geometry.location.lng()
Any help you can provide is greatly appreciated!!
Okay so this was a really hard problem to solve because the cause wasn't apparent...autoComplete.getPlace() would just return 'undefined' the first time I called it on each new address.
I'm still not sure why that's happening and neither is Google because I used our google cloud support to see if they had any ideas, it turns out they didn't.
Here's the solution I came up with... essentially in the "Creating AutoComplete" section of my code above I abandon autocomplete and replaced it with google.maps.places.
Be sure to add "places" in your call to the google API...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YourKey&libraries=imagery,places">
This is what it looks like...
$scope.initAutoComplete = function(){
//get textbox used for address or place search
var input = document.getElementById('autocomplete');
//create google places variable and bind input to it.
var searchBox = new google.maps.places.SearchBox(input);
// When the user selects an address from the dropdown,
trigger function
searchBox.addListener('places_changed', function () {
//calling "getPlaces" instead of get place()
var place = searchBox.getPlaces();
//passing place to my dropPin service
rcisMapService.dropPin(place);
});
};
I also added class="controls" to the used for address/place search
This solution consistently returns every time.
这篇关于Google maps API autocomplete.getPlace（）不一致地返回几何图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
