角谷歌,地图搜索功能的工作示例 [英] Working example of angular-google-maps search function
本文介绍了角谷歌,地图搜索功能的工作示例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有人有像一个角谷歌 - 地图 - 团队下的搜索框在本网站呈现出工作搜索框的例子:<一href=\"https://angular-ui.github.io/angular-google-maps/#!/api\">https://angular-ui.github.io/angular-google-maps/#!/api
Does anyone have an example of a working search box like the one the angular-google-maps-team is showing under 'search-box' on this site: https://angular-ui.github.io/angular-google-maps/#!/api
如果你写的东西它肯定不会发现它在一个下拉列表中,但是当你preSS输入,地图上没有响应。 - 你怎么能做出地图移动到正确的位置,当你按下回车键
If you write something it sure does find it in a dropdown, but when you press enter, the map doesn't respond. - How can you make the map move to the correct location when you hit enter?
推荐答案
HTML
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box>
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-google-map>
JS控制器:
$scope.map = {
"center": {
"latitude": 52.47491894326404,
"longitude": -1.8684210293371217
},
"zoom": 15
}; //TODO: set location based on users current gps location
$scope.marker = {
id: 0,
coords: {
latitude: 52.47491894326404,
longitude: -1.8684210293371217
},
options: { draggable: true },
events: {
dragend: function (marker, eventName, args) {
$scope.marker.options = {
draggable: true,
labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
labelAnchor: "100 0",
labelClass: "marker-labels"
};
}
}
};
var events = {
places_changed: function (searchBox) {
var place = searchBox.getPlaces();
if (!place || place == 'undefined' || place.length == 0) {
console.log('no place data :(');
return;
}
$scope.map = {
"center": {
"latitude": place[0].geometry.location.lat(),
"longitude": place[0].geometry.location.lng()
},
"zoom": 18
};
$scope.marker = {
id: 0,
coords: {
latitude: place[0].geometry.location.lat(),
longitude: place[0].geometry.location.lng()
}
};
}
};
$scope.searchbox = { template: 'searchbox.tpl.html', events: events };
这篇关于角谷歌,地图搜索功能的工作示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文