在我点击的 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 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 上找到了这个解决方案。希望这对其他人也有帮助。

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

    }
};

在我点击的 Google 地图上添加标记

Add Marker on Google map wherever I click

javascript

angularjs

google-maps

google-maps-markers

angular-google-maps