有没有人有一个像谷歌地图团队在这个网站的“搜索框”下显示的工作搜索框的例子:
https://angular-ui.github.io/angular-google-maps/#!/api
如果你写的东西确实找到它在一个下拉列表中,但是当你按回车,地图没有回应。 – 当您输入时,如何使地图移动到正确的位置?
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 };