Angular Google Maps指令在"place_changed"之后缩放太近事件

Angular Google Maps Directive zoom too close after "place_changed" event

本文关键字:quot 缩放 之后 事件 changed Maps Google Angular place 指令      更新时间:2023-09-26

我目前正在为DHL开发一个商店查找器应用程序,可以在storefinder.hashfff.com/app/index.html查看

在这个应用程序中,我使用的是Angular - Google - Maps库,它提供了一些简洁的功能,尽管我认为直接使用Google Maps API会是更好的选择,因为Google API文档更详细,然而,作为Angular的新手,我认为它会有所帮助。

我的搜索框被绑定到一个名为"place_changed"的事件监听器,它在自动完成设置后触发,它将自动完成作为一个参数。

events: {
            place_changed: function(autocomplete) {
                var searchString = autocomplete.gm_accessors_.place.Sc.formattedPrediction;
                var searchCountry = searchString.split(',').pop().trim(); 
                var searchCity = searchString.split(',');
                var jsonQuery = "http://dhl.hashfff.com/api/dhl_store_finder_api.php/?country=" + searchCountry;
                // Filter search results by search term. City, Address or Country
                $.getJSON(jsonQuery , function(data) {
                    $scope.$apply(function() {
                        $scope.stores = _.filter(data, function(search) {
                            console.log(search.address2.toLowerCase().indexOf(searchCity[0].toLowerCase()));
                            return search.city.toLowerCase() == searchCity[0].toLowerCase() || search.address2.toLowerCase().indexOf(searchCity[0].toLowerCase()) > -1 || search.country.toLowerCase().indexOf(searchCity[0].toLowerCase()) > -1;
                        });
                        $('.cd-panel-search').addClass('is-visible');
                    });
                });

                place = autocomplete.getPlace();
                if (place.address_components) {
                    // For each place, get the icon, place name, and location.
                    newMarkers = [];
                    var bounds = new google.maps.LatLngBounds();
                    var marker = {
                      id:place.place_id,
                      place_id: place.place_id,
                      name: place.address_components[0].long_name,
                      latitude: place.geometry.location.lat(),
                      longitude: place.geometry.location.lng(),
                      options: {
                        visible:false
                      },
                      templateurl:'window.tpl.html',
                      templateparameter: place
                    };
                    newMarkers.push(marker);
                    bounds.extend(place.geometry.location);
                    $scope.map.bounds = {
                        northeast: {
                          latitude: bounds.getNorthEast().lat(),
                          longitude: bounds.getNorthEast().lng()
                        },
                        southwest: {
                          latitude: bounds.getSouthWest().lat(),
                          longitude: bounds.getSouthWest().lng()
                        }
                    }
                    _.each(newMarkers, function(marker) {
                        marker.closeClick = function() {
                          $scope.selected.options.visible = false;
                          marker.options.visble = false;
                          return $scope.$apply();
                        };
                        marker.onClicked = function() {
                          $scope.selected.options.visible = false;
                          $scope.selected = marker;
                          $scope.selected.options.visible = true;
                        };
                    });
                    $scope.map.markers = newMarkers;
                }
            }
        }

发生的事情是,自动补全后,它去搜索的地方,但变焦设置为最大,这太近了。我知道map. setzoom(5)是通常的答案,但是我在这个事件侦听器中没有可用的地图对象。

我希望有人有经验的谷歌地图的Angular指令,可以给我一个帮助。如果您需要任何其他代码,我很乐意更新查询。

边界的创建是无用的,因为当latlnbounds确实具有相同的NE和SW时(这是您的示例中的情况,因为您只有一个地方/位置),您可以简单地设置地图的中心:

            $scope.map.center={
                          latitude: bounds.getNorthEast().lat(),
                          longitude: bounds.getNorthEast().lng()
                        };

不同之处在于:地图的缩放不会被修改(就像使用fitBounds时那样)

当你想设置缩放时,使用

,例如:

$scope.map.zoom=5;