Question

我在项目中使用ngMap，我在不同的视图上有不同的地图。我有一个初始页面，我在其中显示地图并绘制多边形和一些标记。我的控制器是这样的：

 $scope.showInitialMap = function( map ) {
    /*Resize image to show on map*/
    var iconGood = {
      url: 'modules/cars/img/ambulance_ok.png',
      scaledSize: new google.maps.Size( 40, 40 ),
      origin: new google.maps.Point( 0, 0 ),
      anchor: new google.maps.Point( 0, 0 )
    };
    /*Get all cars*/
    $scope.tracks = Tracks.getTaxisRealTime( function() {

      angular.forEach( $scope.tracks, function( c ) {
        var infowindow = new google.maps.InfoWindow( {
          content: contentString
        } );
        /*Set marker position fo each car*/
        var marker = new google.maps.Marker( {
          position: {
            lat: c.Latitude,
            lng: c.Longitude
          },
          icon: iconGood,
          map: map
        } );
      } );
      /*draw map*/
      setArea( map );
    } );
  };

我只是将它添加到视图中：

<section data-ng-controller="MapsCtrl" ng-init="InitTaxiHistory()">
    <ng-map center="[19.54, -96.91]" zoom="13" style="height: 600px;"   min-zoom="12">
    </ng-map>
</section>

问题在于，当我进入另一个我也显示地图的视图时，它保持与我离开上一张地图的状态相同。

如何重置地图？或者如何为地图创建2个不同的实例？

Answer 1

创建Google Map的新实例会使问题变得复杂，根本不推荐。

查看相关问题：

<强>解决方案

根据您的情况，您可以处理每个ng-map，让googlemap根据您当前的控制器显示不同的内容。

<ng-map>
  <marker ng-repeat="marker in tracks" position="{{marker. Latitude}}, {{marker. Longitude}}"></marker>
<ng-map>

如果$scope.tracks中没有数据且$scope.tracks未定义，则自动删除标记。

Plunker demo。

Answer 2

由于NgMap扩展google.maps.Map对象来存储所有对象（标记，形状），您可以通过调用setMap()方法清除地图：

$scope.clearMap = function () {
    //clear markers
    for (var k in $scope.map.markers) {
        $scope.map.markers[k].setMap(null);
    }
    //clear shapes
    for (var k in $scope.map.shapes) {
        $scope.map.shapes[k].setMap(null);
    };
};

实施例

＆＃13;

var app = angular.module('appMaps', ['ngMap']);
app.controller('mapCtrl', function ($scope, NgMap) {

    $scope.cities = [
        { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
        { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
        { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
        { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
        { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
    ];


    NgMap.getMap().then(function (map) {
        $scope.map = map;
    });


    $scope.clearMap = function () {
        //clear markers
        for (var k in $scope.map.markers) {
            $scope.map.markers[k].setMap(null);
        }
        //clear shapes
        for (var k in $scope.map.shapes) {
            $scope.map.shapes[k].setMap(null);
        };
    };

    $scope.showMap = function () {
        //clear markers
        for (var k in $scope.map.markers) {
            $scope.map.markers[k].setMap($scope.map);
        }
        //clear shapes
        for (var k in $scope.map.shapes) {
            $scope.map.shapes[k].setMap($scope.map);
        };
    };

});

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="appMaps" ng-controller="mapCtrl">
        <button ng-click="clearMap()">Clear All</button> 
        <button ng-click="showMap()">Show All</button>  
        <map center="[59.339025, 18.065818]" zoom="4">
            <marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.pos}}" >
            </marker>

            <shape name="rectangle" bounds="[ [57.190, 16.149], [59.899, 20.443] ]"></shape>
        </map>
</div>

＆＃13;

清除Google地图初始状态

2 个答案: