無論我在哪里單擊，都可以在Google地圖上添加標記

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

我想將angular.extend的'click：'部分中存在的功能移動到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將有助於創建新的標記或刪除舊的標記。

在“ ChildCtrl”中，您可以編寫一個函數來更新父控制器的scope.markers對象。

Answer 2

您可以聲明在單獨的控制器中添加標記的函數，然后利用$controller服務將該控制器注入另一個控制器：

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

我使用了不同但更好的方法來達到期望的結果。 在小提琴上找到了這個解決方案。 希望這對其他人也有幫助。

function dragMarkerService(resolveAddressService){
    this.placeMarker = function(location, idValue, map){
        var myMarker = new google.maps.Marker({
            position: new google.maps.LatLng(location.latitude, location.longitude),
            draggable: true
        });

        google.maps.event.addListener(myMarker, 'dragend', function (evt) {
            location.latitude = evt.latLng.lat();
            location.longitude = evt.latLng.lng();

            resolveAddressService.resolveAddress(location, idValue)
        });
        google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
            angular.element(idValue).val() = 'Currently dragging marker...';
        });

        map.setCenter(myMarker.position);
        myMarker.setMap(map);

    }
};