Question

我需要以编程方式触发angular-google-maps搜索框的places_changed事件，而不是手动按Enter键。我该如何做到这一点？

我尝试使用vanilla js解决方案：

google.maps.event.trigger(searchbox, 'places_changed');

但我不确定要发送什么作为第一个参数。

这是我的标记：

<ui-gmap-google-map center='map.center' zoom='map.zoom' draggable="true" options="map.options" control="map.control">
    <ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="'TOP_LEFT'">
    </ui-gmap-search-box>
</ui-gmap-google-map>

这是我的控制器代码：

$ scope.map = { 中央： { 纬度：45，经度：-73 }， zoom：8 }; $ scope.map.control = {}; $ scope.map.options = { scrollwheel：是的 };

    var events = {
        places_changed: function(searchBox) {
            console.log("Search Box :", searchBox.getPlaces());
            var location = searchBox.getPlaces();
            console.log("Location :", location[0].geometry.location["G"]);
            var geoKeys = Object.keys(location[0].geometry.location);
            console.log("Keys :", geoKeys);
            $scope.map["center"]["latitude"] = location[0]["geometry"]["location"][geoKeys[0]];
            $scope.map["center"]["longitude"] = location[0]["geometry"]["location"][geoKeys[1]];
            uiGmapIsReady.promise(1).then(function(maps) {
                $timeout(function() {
                    console.log("Map :", $scope.map.control.getGMap());
                    console.log("Bounds :", $scope.map.control.getGMap().getBounds());
                    if (location[0].geometry.viewport) {
                        $scope.map.control.getGMap().fitBounds(location[0].geometry.viewport);
                    } else {
                        $scope.map["zoom"] = 15;
                    }
                    var marker = [{
                        coordinates: {
                            latitude: $scope.map["center"]["latitude"],
                            longitude: $scope.map["center"]["longitude"]
                        },
                        title: location[0]["name"],
                        id: location[0]["id"],
                        icon: location[0]["icon"]
                    }];
                    $scope.randomMarkers = marker;
                    console.log("Random Markers :", $scope.randomMarkers);
                });
                console.info("Google Maps ready", $scope.map);

            });
            //$scope.map.fitBounds(location[0].geometry.viewport);
        }
    }

    $scope.searchbox = {
        template: 'app/user/editProfile/map-search.html',
        events: events
    };

现在我需要从页面中的其他位置通过ng-click触发“places_changed”事件。我该如何做到这一点？

提前致谢。

Answer 1

使用它来触发searchBox上的回车键事件，它将产生相同的结果。编辑1 - google.maps.event.trigger在通过angular加载谷歌API后可用。这就是我在自己的应用程序中拥有它的方式：

uiGmapIsReady.promise(1).then(function(instances) {
        instances.forEach(function(inst) {
            // run the searchbox with the input provided
            $timeout(function() {
                var input = angular.element("#" + 'id_of_searchBox')[0];
                google.maps.event.trigger(input, 'focus')
                google.maps.event.trigger(input, 'keydown', {
                    keyCode: 13
                });
            }, 100);
        });
    });

通过angular-google-maps以编程方式触发搜索框“places_changed”事件的语法是什么？

1 个答案: