3

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

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

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

这是代码：

控制器：

$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"}]
4

2 回答 2

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>

于 2016-02-02T12:12:36.147 回答
0

如果有办法为此更改“地图”插件，我建议你看看

http://angular-ui.github.io/angular-google-maps/

在这里，您将获得与 ngMaps 上非常相似的 API，但获得了更细粒度的选项，例如信息窗口内的 ng-templates 标记等....

在他们的实现中，当您生成一些标记时，它们会自动缩放到标记。但是你可以自由地通过事件来做出你自己的决定

于 2016-01-29T21:59:05.533 回答