“ place_changed”事件后，角度Google Maps Directive縮放過近

Question

我目前正在為DHL開發商店查找器應用程序，可以在storefinder.hashfff.com/app/index.html上進行查看

在此應用程序中，我使用的是angular-google-maps庫，該庫提供了一些簡潔的功能，盡管我認為直接使用Google Maps API會是一個更好的選擇，因為Googles 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）是通常的答案，但是在此事件偵聽器中沒有可用的map對象。

希望有人對Google Maps Angular指令有經驗，並能給我幫助。 如果您需要其他任何代碼，我們將很樂意更新查詢。

Answer 1

邊界的創建是無用的，因為當LatLngBounds確實具有相同的NE和SW（在您的示例中就是這樣，因為您只有一個位置/位置），您可以簡單地設置地圖的中心：

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

區別：地圖的縮放不會被修改（就像使用fitBounds時一樣）

當您想設置縮放比例時，例如：

$scope.map.zoom=5;