来自一个 Angular ng-map 的标记重新出现在错误的视图中

Question

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

我的问题：使用一个控制器以一种状态显示在地图上的标记重新出现在不同的地图上，处于不同的状态，甚至不使用相同的控制器。

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

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

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

来自一个 Angular ng-map 的标记重新出现在错误的视图中

Markers from one Angular ng-map re-appearing in the wrong view

javascript

google-maps

angularjs

angular-google-maps