Javascript 清除谷歌地图初始状态

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

 $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>

我只是将其添加到视图中，如下所示：

 $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>

问题是，当我转到另一个视图，在该视图中我还显示了一个地图，它保持了与我离开上一个地图时相同的状态

---

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

创建

谷歌地图的新实例将使问题变得复杂，根本不推荐使用

见相关问题：





解决方案

对于您的情况，您可以根据当前的控制器，通过制作
googlemap
来处理每个
ng map

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



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

Plunker.
由于
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);
    };
};

范例


var-app=angular.module（'appMaps'，['ngMap']）；
app.controller（'mapCtrl'，函数（$scope，NgMap）{
$scope.cities=[
{id:1，姓名：'Oslo'，pos:[59.923043,10.752839]}，
{id:2，姓名：'斯德哥尔摩'，位置：[59.339025,18.065818]}，
{id:3，姓名：'Copenhagen'，pos:[55.675507,12.574227]}，
{id:4，姓名：'柏林'，位置：[52.521248,13.399038]}，
{id:5，名字：'巴黎'，位置：[48.856127，2.346525]}
];
NgMap.getMap（）.then（函数（map）{
$scope.map=map；
});
$scope.clearMap=函数（）{
//清晰标记
for（变量k在$scope.map.markers中）{
$scope.map.markers[k].setMap（null）；
}
//清晰的形状
for（变量k在$scope.map.shapes中）{
$scope.map.shapes[k].setMap（null）；
};
};
$scope.showMap=函数（）{
//清晰标记
for（变量k在$scope.map.markers中）{
$scope.map.markers[k].setMap（$scope.map）；
}
//清晰的形状
for（变量k在$scope.map.shapes中）{
$scope.map.shapes[k].setMap（$scope.map）；
};
};
});

清除所有
全部展示
是否有其他方法可以在使用api的代码上执行此操作？我尝试了你的解决方案，但对于我用地图做的所有事情来说都是一件痛苦的事情，在数据库中的每个标记上显示一个信息窗口，在另一个窗口中，我参考点之间的方向，但我使用递归函数，因为谷歌允许超过23个点。我需要清除所有的东西，标记，多边形，方向等@Ellebkey不幸的是，你不能用ng map做到这一点。这似乎可以通过删除包装googlemap的整个div来完成（从回答中的问题链接获得，但我没有测试它）。实际上我一直在研究，直到现在我发现Maps的实现在所有系统上只创建一个实例。因此，为了“清除”映射，我只需全局声明变量，然后每次调用ng init函数时，控制器都会将参数设置为0。