无论我在哪里单击，都可以在Google地图上添加标记

Question

I want to achieve something similar to this http://jsfiddle.net/sya8gn0w/1/ .

Now the problem is I have my own custom directive to display map. I want a function in child controller which will achieve above mentioned functionality on some button click.

eg. The place marker functionality triggers only if I click on some button.

Present code -

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

I want to move the functionality present in 'click:' part of angular.extend to a function presents in ChildCtrl controller. Is it possible ? Ortherwise suggest me different approach to achieve this.

Answer 1

I don't know whether my answer going to help you or not. Recently I worked on GoogleMap, I want to share what I know.

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

Here the statement markers: scope.markers will help to create new markers or to remove old markers.

In "ChildCtrl" you write a function to update scope.markers object of parent controller.

Answer 2

You could declare the function for adding a marker in a separate controller and then utilize $controller service to inject that controller into another 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

I used different but better approach to achieve the desired results. Found this solution on fiddle . Hope this would be helpful for someone else also.

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

    }
};