angularjs - 具有多个标记的 ng-map - 仅显示一个带缩放的标记

Question

我正在使用 ng-map 并尝试在谷歌地图上显示多个标记。 当页面加载时，我希望看到 map 上的所有标记都分散在各个国家/地区。

map 仅显示一个标记的放大部分。可能是因为我将 map 中心分配给数组中的最后一项。 当我滚动/放大和缩小 map 时，我可以看到所有标记。

我不确定当有多个标记时 map 中心应该是什么以及我如何获得一个在 map 加载时显示所有标记的 map View

代码如下:

Controller :

$scope.cityMetaData = [];
$scope.getCityInfo = function(){
    for(var i=0; i<$scope.cityIds.length; i++){
        var id = $scope.cityIds[i];
        GetCity.query({cityid: id}, function(data) { 
            if (data.status == "success") {
                var cityData = data;
                $scope.cityMetaData.push(cityData);
                $scope.addressMarker(cityData);
            }
        });
    }
}

$scope.addressMarker = function(cityItem) {
    var address = cityItem.cityName;
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address' : address
    }, function(results, status) {
        if ( status == google.maps.GeocoderStatus.OK ) {
            $scope.lat = results[0].geometry.location.lat();
            $scope.lng = results[0].geometry.location.lng();
            $scope.markerData.push({
                "latitude" : results[0].geometry.location.lat(),
                "longitude" : results[0].geometry.location.lng(),
                "title" : results[0].formatted_address
            });
        } else {
            $log.info('Geocode was not successful for the following reason:' + status);
        }
    });
}
$scope.getCityInfo();

html:

<map center="[{{lat}},{{lng}}]" zoom="8" style="display:block; width:auto; height:auto;"> 
    <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}"></marker>
</map>

示例 $scope.markerData 数组:

[{"latitude":38.232417,"longitude":-122.6366524,"title":"Petaluma, CA, USA"},
{"latitude":34.1477849,"longitude":-118.14451550000001,"title":"Pasadena, CA, USA"},
{"latitude":40.7556818,"longitude":-73.8830701,"title":"Jackson Heights, Queens, NY, USA"},
{"latitude":32.7766642,"longitude":-96.79698789999998,"title":"Dallas, TX, USA"},
{"latitude":37.7974273,"longitude":-121.21605260000001,"title":"Manteca, CA, USA"},
{"latitude":37.48521520000001,"longitude":-122.23635480000002,"title":"Redwood City, CA, USA"}]

Answer 1

没错，这是因为明确指定了 center 和 zoom 属性。为了相对于标记自动居中和缩放 fitBounds() function旨在。

在angularjs-google-maps您可以为此目的指定 zoom-to-include-markers 属性的组件:

<map zoom-to-include-markers="true" style="display:block; width:auto; height:auto;">
    <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}"></marker>
</map>

修改示例

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function (NgMap, $scope, $q, $log) {

        $scope.lat = 38.232417;
        $scope.lng = -122.6366524;

        $scope.markerData = [];
        $scope.cityMetaData = [];
        $scope.getCityInfo = function () {
            /*for (var i = 0; i < $scope.cityIds.length; i++) {
                var id = $scope.cityIds[i];
                GetCity.query({ cityid: id }, function (data) {
                    if (data.status == "success") {
                        var cityData = data;
                        $scope.cityMetaData.push(cityData);
                        $scope.addressMarker(cityData);
                    }
                });
            }*/

            var data = [
                { cityName: 'Petaluma, CA, USA' },
                { cityName: 'Pasadena, CA, USA' },
                { cityName: 'Jackson Heights, Queens, NY, USA' },
                { cityName: 'Dallas, TX, USA' },
                { cityName: 'Manteca, CA, USA' },
                { cityName: 'Redwood City, CA, USA' },
            ];
            data.forEach(function (item) {
                var cityData = item;
                $scope.cityMetaData.push(cityData);
                $scope.addressMarker(cityData);
            });


        }

        $scope.addressMarker = function (cityItem) {
            var deferred = $q.defer();
            var address = cityItem.cityName;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $scope.$apply(function () {
                        $scope.markerData.push({
                            "latitude": results[0].geometry.location.lat(),
                            "longitude": results[0].geometry.location.lng(),
                            "title": results[0].formatted_address
                        });
                    });
                } else {
                    $log.info('Geocode was not successful for the following reason:' + status);
                }
            });
        }
        $scope.getCityInfo();
    });

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
 
    <map zoom-to-include-markers="true" style="display:block; width:auto; height:auto;">
        <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}"></marker>
    </map>
</div>

示例 2

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function (NgMap, $scope, $q, $log) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
        });   
        
        $scope.currentPin = {title: ""};
        $scope.markerData = [];
        $scope.cityMetaData = [];
        $scope.getCityInfo = function () {
            
            var data = [
                { cityName: 'Petaluma, CA, USA' },
                { cityName: 'Pasadena, CA, USA' },
                { cityName: 'Jackson Heights, Queens, NY, USA' },
                { cityName: 'Dallas, TX, USA' },
                { cityName: 'Manteca, CA, USA' },
                { cityName: 'Redwood City, CA, USA' },
            ];
            data.forEach(function (item) {
                var cityData = item;
                $scope.cityMetaData.push(cityData);
                $scope.addressMarker(cityData);
            });
        }


        $scope.showDetail = function (e, pin) {
          $scope.currentPin = pin;
          $scope.map.showInfoWindow('iw', this);
        };

        $scope.hideDetail = function () {
           $scope.map.hideInfoWindow('iw');
        };

        $scope.addressMarker = function (cityItem) {
            var deferred = $q.defer();
            var address = cityItem.cityName;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $scope.$apply(function () {
                        $scope.markerData.push({
                            "latitude": results[0].geometry.location.lat(),
                            "longitude": results[0].geometry.location.lng(),
                            "title": results[0].formatted_address
                        });
                    });
                } else {
                    $log.info('Geocode was not successful for the following reason:' + status);
                }
            });
        }
        $scope.getCityInfo();
    });

<!--link href="style.css" rel="stylesheet"-->
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.2.23/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="map.js"></script>

<div ng-app="mapApp" ng-controller="mapController">
    <map zoom-to-include-markers="true" style="display:block; width:auto; height:auto;">
        <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}" on-click="showDetail(pin)"></marker>
        <info-window id="iw">
           <div ng-non-bindable="">
                <!--h1>{{currentPin.title}}</h1--> 
           </div>
        </info-window>
    </map>
</div>