我正在使用Angular Google Maps获取带有搜索框的 map 。
我试图将搜索限制为“地址”和一个国家/地区(法国),因此我想使用搜索框指令的“自动完成”选项,如 documentation 中指定的那样。 .
问题是我的代码中的 autocomplete:true
位确实有效地限制了搜索,但它阻止了事件的触发( map 和标记不会更新)。但控制台并没有报错。
但是,如果我注释掉或删除 autocomplete:true
,则会触发事件(刷新 map 和标记),但搜索不限于法国和地址。 .
这是我的代码:
var events = {
places_changed:function (searchBox) {
var place = searchBox.getPlaces();
if (!place || place == 'undefined' || place.length == 0) {
console.log('no place data :(');
return;
}
// refresh the map
$scope.map = {
center:{
latitude:place[0].geometry.location.lat(),
longitude:place[0].geometry.location.lng()
},
zoom:10
};
// refresh the marker
$scope.marker = {
id:0,
options:{ draggable:false },
coords:{
latitude:place[0].geometry.location.lat(),
longitude:place[0].geometry.location.lng()
}
};
}
};
$scope.searchbox = {
template:'searchbox.tpl.html',
events:events,
options:{
autocomplete:true,
types:['address'],
componentRestrictions:{
country:'fr'
}
}
};
在 html 文件中:
<div style="height: 500px;">
<script type="text/ng-template" id="searchbox.tpl.html">
<input type="text"
placeholder="{{'searchbox.google.maps' | text}}"
style="width:270px; height:30px;">
</script>
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<!--SEARCHBOX-->
<ui-gmap-search-box template="searchbox.template"
events="searchbox.events"
position="BOTTOM_RIGHT"
options="searchbox.options"></ui-gmap-search-box>
<!--MARKER-->
<ui-gmap-marker coords="marker.coords"
options="marker.options"
events="marker.events"
idkey="marker.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
我做错了什么? 有没有办法获得对搜索和触发事件的限制?
提前谢谢您!
最佳答案
好吧,我明白了,所以我回答我自己的问题,以防其他人陷入困境!
如果 autocomplete:true
,那么它不是 places_changed
和 searchBox.getPlaces()
,而是 place_changed
和 searchBox.getPlace() 。我们得到的不是一系列地点,而是一个地点。
这是一个工作代码:
var events = {
place_changed:function (searchBox) {
var place = searchBox.getPlace();
if (!place || place == 'undefined') {
console.log('no place data :(');
return;
}
// refresh the map
$scope.map = {
center:{
latitude:place.geometry.location.lat(),
longitude:place.geometry.location.lng()
},
zoom:10
};
// refresh the marker
$scope.marker = {
id:0,
options:{ draggable:false },
coords:{
latitude:place.geometry.location.lat(),
longitude:place.geometry.location.lng()
}
};
}
};
关于angularjs - Angular 谷歌地图搜索框指令: events don't fire when trying to restrict the search (with autocomplete option),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32024234/