AngularJS with Google Maps 반경

AngularJS를 사용하여 앱을 만들려고합니다. 휴대 기기에서 사용자의 위치를 차지하고 시간 경과에 따라 크기가 커지는 반경을 만듭니다. 여기까지 내가 가지고있는 것 : http://alainwebdesign.ca/doglocate/example/issue-1068-circle-events-doubled.html.AngularJS with Google Maps 반경

앱이 대부분 작동하지만지도를 이동/드래그 할 때 반경 중심이 바뀌므로 원하는 바가 없습니다. 반경의 중심을 지정된 위치에 고정시키고 싶습니다. 여기

<!DOCTYPE html> 
<html ng-app="app"> 

<head> 
    <link rel="stylesheet" href="assets/stylesheets/example.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="../website_libs/dev_deps.js"></script> 
    <script src="https://code.angularjs.org/1.3.6/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script> 
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script> 
    <script src="assets/scripts/controllers/issue-1068-circle-events-doubled.js"></script> 
    <title>Dog Locate</title> 
</head> 

<body> 



<div data-ng-controller="MapsCtrl"> 
    <ui-gmap-google-map 
         center='map.center' 
         zoom='map.zoom' 
         draggable='map.draggable' 
         dragging='map.dragging' 
         refresh='map.refresh' 
         options='map.options' 
         events='map.events' 
         pan='map.pan'> 


     <ui-gmap-circle 
         center='map.circle.center' 
         radius='map.circle.radius' 
         fill='map.circle.fill' 
         stroke='map.circle.stroke' 
         clickable='map.circle.clickable' 
         draggable='map.circle.draggable' 
         editable='map.circle.editable' 
         visible='map.circle.visible' 
         events='map.circle.events'> 

     </ui-gmap-circle> 


    </ui-gmap-google-map> 


</div> 
</body> 

</html>

그리고 내 자바 스크립트입니다 : 내 자신의 질문을 해결

(function (window, ng) { 
    ng.module('app', ['uiGmapgoogle-maps']) 
    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", 
     function ($scope, $log, GoogleMapApi, $interval) { 
      $log.currentLevel = $log.LEVELS.debug; 
      var center = { 
       latitude: 49.22, 
       longitude: -122.66 
      }; 

      $scope.map = { 
       center: center, 
       pan: false, 
       zoom: 16, 
       refresh: false, 
       events: {}, 
       bounds: {} 
      }; 

      $scope.map.circle = { 
       id: 1, 
       center: center, 
       radius: 500, 
       stroke: { 
        color: '#08B21F', 
        weight: 2, 
        opacity: 1 
       }, 

       fill: { 
        color: '#08B21F', 
        opacity: 0.5 
       }, 
       geodesic: false, // optional: defaults to false 
       draggable: false, // optional: defaults to false 
       clickable: true, // optional: defaults to true 
       editable: false, // optional: defaults to false 
       visible: true, // optional: defaults to true 
       events: { 
        dblclick: function() { 
         $log.debug("circle dblclick"); 
        }, 
        radius_changed: function (gObject) { 
         var radius = gObject.getRadius(); 
         $log.debug("circle radius radius_changed " + radius); 
        } 
       } 
      } 
      //Increase Radius: 
      $interval(function(){ 
       $scope.map.circle.radius += 30; 
      }, 1000); 
     } ]); 



})(window, angular);

출처

2016-09-02 Anonymous

여기 내 HTML입니다. Center 변수를 선언 한 후 Object.freeze (center)를 사용했습니다.

출처

2016-09-02 07:20:04

AngularJS with Google Maps 반경

답변

관련 문제