Question

我有一个运行ui-router和NgMap的Angular 1.5应用来显示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

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

的变化：

在#Ignore public/typings/* #Allow !public/typings/browser/ambient/jquery/jquery.d.ts更改

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

Modified plunker

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

1 个答案: