javascript - 清除谷歌地图初始状态

Question

我正在使用 ngMap在一个项目中，我在不同的 View 上有不同的 map 。我有一个初始页面，其中显示了一张 map 并绘制了一个多边形和一些标记。我的 Controller 是这样的:

 $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 );
    } );
  };

我只是像这样将它添加到 View 中:

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

问题是，当我转到另一个显示 map 的 View 时，它会保持我离开上一张 map 时的相同状态。

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

Answer 1

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

查看相关问题:

• What is the Proper Way to Destroy a Map Instance?
• How to destroy or reset map?

解决方案

对于您的情况，您可以处理每个 ng-map，使 googlemap 根据您当前的 Controller 显示不同的内容。

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

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

笨蛋 demo .