angularjs - 谷歌 Angular map 搜索功能的工作示例

Question

有没有人有一个工作搜索框的示例，例如angular-google-maps-team在此网站上的“搜索框”下显示的搜索框:https://angular-ui.github.io/angular-google-maps/#!/api

如果您编写某些内容，则肯定会在下拉菜单中找到它，但是当您按Enter键时， map 不会响应。 -按下Enter键后，如何将 map 移至正确的位置？

Answer 1

的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 Controller :

$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 };