javascript - 一张 Angular ng-map 中的标记重新出现在错误的 View 中

Question

我有一个运行 ui-router 和 NgMap 的 Angular 1.5 应用来显示 Google map 。

我的问题:在一种状态下使用一个 Controller 显示在 map 上的标记在另一张 map 上以不同的状态重新出现，甚至不使用相同的 Controller 。

I've created a Plunker here that shows the issue.

在我的 MapController 中，我必须执行 NgMap.getMap() 来添加标记，因为我将使用标记进行一些更高级的工作，这将超出 NgMap 单独的功能。不过，我不知道为什么这些标记会在不同 View 中的不同 Controller 中转移到不同的 map 上。有谁知道处理这个问题的好方法吗？

var routerApp = angular.module('routerApp', ['ui.router', 'ngMap']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/map');

    $stateProvider

        .state('map', {
            controller:"MapController",
            url: '/map',
            templateUrl: 'map.html'
        })
        .state('view', {
            controller:"ViewController",
            url: '/view/?lat&lng',
            templateUrl: 'view.html'
        })


});

routerApp.controller('MapController', function($scope, NgMap, $state) {
  NgMap.getMap({id:"main-map"}).then(function(map){
    markers = [];

    for(i = -180; i < 180; i = i + 30){
      for(j = -85; j < 85; j = j + 30){
       marker = new google.maps.Marker({
          position: {
            lng: i,
            lat: j
          },
          map: map
        });

        marker.addListener('click', function() {
            $state.go("view", {lat: marker.getPosition().lat(), lng:marker.getPosition().lng()});
        });

        markers.push(marker)
      }
    }
  });
});

routerApp.controller('ViewController', function($scope, NgMap, $state, $stateParams) {
  $scope.lat = $stateParams.lat;
  $scope.lng = $stateParams.lng;
});

Answer 1

令人惊讶的是，但是这个问题可以通过更改 map 上标记的初始化方式来解决。

变化:

在map.html中更改

<ng-map id="main-map" center="0, 0" zoom="2">
</ng-map>

至

<ng-map id="main-map" center="0, 0" zoom="2">
   <marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}" on-click="clickMarker()"></marker>
</ng-map>

然后:

routerApp.controller('MapController', function($scope, NgMap, $state) {
    NgMap.getMap({ id: "main-map" }).then(function(map) {
        var markers = [];

        for (i = -180; i < 180; i = i + 30) {
            for (j = -85; j < 85; j = j + 30) {
                var marker = new google.maps.Marker({
                    position: {
                        lng: i,
                        lat: j
                    },
                    map: map
                });

                marker.addListener('click', function() {
                    $state.go("view", { lat: marker.getPosition().lat(), lng: marker.getPosition().lng() });
                });

                markers.push(marker);
            }
        }
    });
});

到

routerApp.controller('MapController', function($scope, NgMap, $state) {
    NgMap.getMap({ id: "main-map" }).then(function(map) {       
        $scope.positions = [];

        $scope.clickMarker = function(event){
            $state.go("view", {lat: event.latLng.lat(), lng: event.latLng.lng()});
        };

        for (i = -180; i < 180; i = i + 30) {
            for (j = -85; j < 85; j = j + 30) {
                $scope.positions.push({
                        lng: i,
                        lat: j
                    });
            }
        }
    });
});

Modified plunker