Question

我希望实现与此http://jsfiddle.net/sya8gn0w/1/类似的功能。

现在的问题是我有自己的自定义指令来显示地图。我想在子控制器中使用一个函数，它将在某个按钮点击上实现上述功能。

例如。仅当我点击某个按钮时，才会触发位置标记功能。

目前的代码 -

function ParentCtrl($scope){
    var mainCtrl = this;

    angular.extend(mainCtrl , {
        map: {
            center: {
                latitude: 18.5,
                longitude: 73.85
            },
            zoom: 13,
            markers: [],
            events: {
                click: function (map, eventName, originalEventArgs) {
                    var e = originalEventArgs[0];
                    var lat = e.latLng.lat(), lon = e.latLng.lng();
                    var marker = {
                        id: Date.now(),
                        coords: {
                            latitude: lat,
                            longitude: lon
                        }
                    };
                    mainCtrl .map.markers.pop();
                    mainCtrl .map.markers.push(marker);
                    console.log(mainCtrl .map.markers);
                    console.log("latitude : "+lat+" longitude : "+lon);
                    $scope.$apply();
                }
            }
        }
    });
};

我想移动＆＃39;点击中显示的功能：＆＃39; angular.extend到函数的一部分呈现在ChildCtrl控制器中。可能吗？另外建议我采用不同的方法来实现这一目标。

Answer 1

我不知道我的答案是否会帮助你。最近我在GoogleMap上工作，我想分享我所知道的。

  angular.extend(scope, {
  map: {
    show: true,
    control: {},
    version: 'uknown',
    center: {
      latitude: 0,
      longitude: 0
    },
    options: {
      streetViewControl: false,
      panControl: false,
      maxZoom: 10,
      minZoom: 1
    },
    zoom: 2,
    dragging: false,
    bounds: {},
    markers: scope.markers,
    doClusterMarkers: true,
    currentClusterType: 'standard',
    clusterTypes: clusterTypes,
    selectedClusterTypes: selectedClusterTypes,
    clusterOptions: selectedClusterTypes['standard'],
    events: {
      tilesloaded: function(map, eventName, originalEventArgs) {},
      click: function(mapModel, eventName, originalEventArgs) {},
      dragend: function() {}
    },
    toggleColor: function(color) {
      if (color === 'red') {
        return '#6060FB';
      } else {
        return 'red';
      }
    }
  }

此处声明markers: scope.markers将有助于创建新标记或删除旧标记。

In＆＃34; ChildCtrl＆＃34;你编写一个函数来更新父控制器的scope.markers对象。

Answer 2

您可以声明在单独的控制器中添加标记的功能然后利用$controller service将该控制器注入另一个控制器：

angular.module('main', ['uiGmapgoogle-maps'])
.controller('MapCtrl', function ($scope,$controller) {

    $controller('MarkerCtrl', {$scope: $scope}); 

    angular.extend($scope, {
        map: {
            center: {
                latitude: 42.3349940452867,
                longitude:-71.0353168884369
            },
            zoom: 11,
            markers: [],
            events: {
            click: function (map, eventName, originalEventArgs) {
                var e = originalEventArgs[0];
                $scope.addMarker(e.latLng);
                $scope.$apply();
            }
        }
        }
    });
})
.controller('MarkerCtrl', function($scope) {

     angular.extend($scope, {

         addMarker: function(latLng) { 
             var marker = {
                    id: Date.now(),
                    coords: {
                        latitude: latLng.lat(),
                        longitude: latLng.lng()
                    }
             };
             $scope.map.markers.push(marker);
         }
     });    
});

Plunker

Answer 3

我使用了不同但更好的方法来达到预期的效果。在fiddle 找到了这个解决方案。希望这对其他人也有帮助。

from subprocess import Popen, PIPE

proc = Popen(["/usr/bin/nc", "-l", "9999"], stdout=PIPE)

buffer = []
line = proc.stdout.readline()
while line:
    buffer.append(line)
    print "LINE", line.strip()
    line = proc.stdout.readline()

print "buffer", ''.join(buffer)

无论我点击哪里，都会在Google地图上添加标记

3 个答案: