Écoutez une case à cocher et afficher/cercle en forme de peau sur google-maps (AngularJS)

Question

Ma question est liée à ce fil plus Google Maps v3 setting a circle with editable radius but not center

J'ai eu la même question que ce gars-là et a résolu mon problème avec la solution de géocodezip.

Mais maintenant, pas coincé à un autre point. J'ai une case à cocher appelée par Radius et seulement si cette case est cochée je voudrais montrer le cercle. Sinon, je veux seulement montrer le marqueur. Mais je ne suis pas capable de trouver le cercle ou le marqueur dans mon HTML, donc je ne suis pas sûr de savoir comment je peux changer cette visibilité du cercle.

J'ai utilisé un écouteur sur ma case à cocher pour écouter l'événement de changement et quand je suis viré je voudrais changer la visibilité.

$scope.$watch('vm.socialMediaFilter.byRadius', function() 
{ 
    var circle = document.getElementById('circleModal'); 
    console.log(vm.socialMediaFilter.byRadius); 
}); 

HTML-Tag de carte

<div class="col-xs-12"> 
    <ng-map id="modalMap" class="gov-map" style="display: block; height: 25vh;"</ng-map> 
</div> 

what got rendered from controller + html

Answer 1

(function() { 
'use strict'; 

angular 
    .module('kokosGisApp') 
    .controller('SocialMediaFilterDialogController', SocialMediaFilterDialogController); 

SocialMediaFilterDialogController.$inject = ['Principal', '$timeout', '$rootScope', '$scope', '$stateParams', '$uibModalInstance', 'entity', 'SocialMediaFilter', 'User', 'NgMap']; 

function SocialMediaFilterDialogController(Principal, $timeout, $rootScope, $scope, $stateParams, $uibModalInstance, entity, SocialMediaFilter, User, NgMap) { 
    var vm = this; 
    vm.socialMediaFilter = entity; 
    vm.clear = clear; 
    vm.save = save; 
    vm.users = User.query(); 

    if (vm.socialMediaFilter.mapInit == 0) { 
     vm.socialMediaFilter.type = "Facebook"; 
     vm.socialMediaFilter.radius = 150; 
     vm.socialMediaFilter.address = $rootScope.res[0]; 
     vm.socialMediaFilter.city = $rootScope.res[1]; 
     vm.socialMediaFilter.latitude = $rootScope.mouseEventLatLng.lat(); 
     vm.socialMediaFilter.longitude = $rootScope.mouseEventLatLng.lng(); 
    } else if (vm.socialMediaFilter.mapInit == 1) { 
     vm.socialMediaFilter.type = "Facebook"; 
     vm.socialMediaFilter.radius = 150; 
     vm.socialMediaFilter.address = ''; 
     vm.socialMediaFilter.city = ''; 
     vm.socialMediaFilter.latitude = 50.875863; 
     vm.socialMediaFilter.longitude = 8.0168847; 
    } 


    Principal.identity().then(function (user) { 
     vm.socialMediaFilter.user = user; 
    }); 

    $timeout(function() { 
     angular.element('.form-group:eq(1)>input').focus(); 
    }); 

    function clear() { 
     $uibModalInstance.dismiss('cancel'); 
    } 

    function save() { 

     NgMap.getMap({id: 'modalMap'}).then(function (map) { 
      if (typeof this.map.shapes !== 'undefined') { 
       vm.socialMediaFilter.latitude = map.shapes.circleModal.center.lat(); 
       vm.socialMediaFilter.longitude = map.shapes.circleModal.center.lng(); 
       vm.socialMediaFilter.radius = map.shapes.circleModal.radius; 
      } else { 
       vm.socialMediaFilter.latitude = map.markers.markerModal.position.lat(); 
       vm.socialMediaFilter.longitude = map.markers.markerModal.position.lng(); 
       vm.socialMediaFilter.radius = null; 
      } 
     }); 
     vm.isSaving = true; 
     if (vm.socialMediaFilter.id !== null) { 
      SocialMediaFilter.update(vm.socialMediaFilter, onSaveSuccess, onSaveError); 
     } else { 
      SocialMediaFilter.save(vm.socialMediaFilter, onSaveSuccess, onSaveError); 
     } 
    } 

    function onSaveSuccess(result) { 
     $scope.$emit('kokosGisApp:socialMediaFilterUpdate', result); 
     $uibModalInstance.close(result); 
     vm.isSaving = false; 
    } 

    function onSaveError() { 
     vm.isSaving = false; 
    } 

    $scope.$watch('vm.socialMediaFilter.byRadius', function() 
    { 
     if (vm.socialMediaFilter.byRadius) { 
      $scope.circle.visible = false; 
     } else $scope.circle.visible = true; 
    }); 

    /** 
    * A distance widget that will display a circle that can be resized and will 
    * provide the radius in km. 
    * 
    * @param {google.maps.Map} map The map to attach to. 
    * 
    * @constructor 
    */ 

    function DistanceWidget(map) { 
     this.set('map', map); 
     this.set('position', map.getCenter()); 

     var marker = new google.maps.Marker({ 
      // draggable: true, // <-- change to make so position doesn't move 
      title: 'Move me!', 
      id: 'markerModal' 
     }); 

     // Bind the marker map property to the DistanceWidget map property 
     marker.bindTo('map', this); 

     // Bind the marker position property to the DistanceWidget position 
     // property 
     marker.bindTo('position', this); 

     // Create a new radius widget 
     $scope.radiusWidget = new RadiusWidget(); 

     // Bind the radiusWidget map to the DistanceWidget map 
     $scope.radiusWidget.bindTo('map', this); 

     // Bind the radiusWidget center to the DistanceWidget position 
     $scope.radiusWidget.bindTo('center', this, 'position'); 

     // Bind to the radiusWidgets' distance property 
     this.bindTo('distance', $scope.radiusWidget); 

     // Bind to the radiusWidgets' bounds property 
     this.bindTo('bounds', $scope.radiusWidget); 
    } 

    DistanceWidget.prototype = new google.maps.MVCObject(); 


    /** 
    * A radius widget that add a circle to a map and centers on a marker. 
    * 
    * @constructor 
    */ 
    function RadiusWidget() { 
     $scope.circle = new google.maps.Circle({ 
      strokeWeight: 2, 
      color: 'orange', 
      visible: true 
     }); 

     // Set the distance property value, default to 10km. 
     this.set('distance', 150); 

     // Bind the RadiusWidget bounds property to the circle bounds property. 
     this.bindTo('bounds', $scope.circle); 

     // Bind the circle center to the RadiusWidget center property 
     $scope.circle.bindTo('center', this); 

     // Bind the circle map to the RadiusWidget map 
     $scope.circle.bindTo('map', this); 

     // Bind the circle radius property to the RadiusWidget radius property 
     $scope.circle.bindTo('radius', this); 

     // this.bindTo('byRadius', vm.socialMediaFilter.byRadius); 

     // Add the sizer marker 
     this.addSizer_(); 
    } 

    RadiusWidget.prototype = new google.maps.MVCObject(); 
    // RadiusWidget.prototype.byRadius_changed = function() { 
    //  console.log('dasdas'); 
    // } 


    /** 
    * Update the radius when the distance has changed. 
    */ 
    RadiusWidget.prototype.distance_changed = function() { 
     this.set('radius', this.get('distance')); 
    }; 


    /** 
    * Add the sizer marker to the map. 
    * 
    * @private 
    */ 
    RadiusWidget.prototype.addSizer_ = function() { 
     var sizer = new google.maps.Marker({ 
      draggable: true, 
      visible: true 
     }); 

     sizer.bindTo('map', this); 
     sizer.bindTo('position', this, 'sizer_position'); 

     var me = this; 
     google.maps.event.addListener(sizer, 'drag', function() { 
      // As the sizer is being dragged, its position changes. Because the 
      // RadiusWidget's sizer_position is bound to the sizer's position, it will 
      // change as well. 
      var min = 0.5; 
      var max = 2500; 
      var pos = me.get('sizer_position'); 
      var center = me.get('center'); 
      var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos); 
      if (distance < min) { 
       me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, min, google.maps.geometry.spherical.computeHeading(center, pos))); 
      } else if (distance > max) { 
       me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, max, google.maps.geometry.spherical.computeHeading(center, pos))); 
      } 
      // Set the circle distance (radius) 
      me.setDistance(); 

     }); 
    }; 


    /** 
    * Update the center of the circle and position the sizer back on the line. 
    * 
    * Position is bound to the DistanceWidget so this is expected to change when 
    * the position of the distance widget is changed. 
    */ 
    RadiusWidget.prototype.center_changed = function() { 
     var bounds = this.get('bounds'); 

     // Bounds might not always be set so check that it exists first. 
     if (bounds) { 
      var lng = bounds.getNorthEast().lng(); 

      // Put the sizer at center, right on the circle. 
      var position = new google.maps.LatLng(this.get('center').lat(), lng); 
      this.set('sizer_position', position); 
     } 
    }; 


    /** 
    * Set the distance of the circle based on the position of the sizer. 
    */ 
    RadiusWidget.prototype.setDistance = function() { 
     // As the sizer is being dragged, its position changes. Because the 
     // RadiusWidget's sizer_position is bound to the sizer's position, it will 
     // change as well. 
     var pos = this.get('sizer_position'); 
     var center = this.get('center'); 
     var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos); 

     // Set the distance property for any objects that are bound to it 
     this.set('distance', distance); 
    }; 


    function initMap() { 

     NgMap.getMap({id:'modalMap'}).then(function (map) { 
       map.setCenter(new google.maps.LatLng(vm.socialMediaFilter.latitude, vm.socialMediaFilter.longitude)); 
       var currentCenter = map.getCenter(); 
       map.setZoom(15); 
       google.maps.event.trigger(map, 'resize'); 
       map.setCenter(currentCenter); 
       var distanceWidget = new DistanceWidget(map); 

       // google.maps.event.addListener(distanceWidget, 'distance_changed', function() { 
       //  displayInfo(distanceWidget); 
       // }); 
       // 
       // google.maps.event.addListener(distanceWidget, 'position_changed', function() { 
       //  displayInfo(distanceWidget); 
       // }); 
      } 
     ); 

    } 

    google.maps.event.addDomListener(window, 'load', initMap()); 
} 
})(); 

c'est le contrôleur qui est utilisé comme modal pour sauver une entité à mon db

Et je seulement voudrait montrer le cercle si la case "Suchradius eingrenzen" est marquée. Si ce n'est pas marqué, je voudrais seulement montrer le marqueur au centre.

modal