i trying create app using angularjs takes user's location (from mobile) , creates radius increases in size on time. here have far: http://alainwebdesign.ca/doglocate/example/issue-1068-circle-events-doubled.html.
the app works part, problem when move/drag map, radius center changes not want. want center of radius lock in @ specified location.
here html:
<!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> and here javascript:
(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 false draggable: false, // optional: defaults false clickable: true, // optional: defaults true editable: false, // optional: defaults false visible: true, // optional: defaults 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);
solved own question. used object.freeze(center) after declaring center variable.
Comments
Post a Comment