0 votes
in Education by (1.7m points)
I am trying to create an app using AngularJS that takes a user's location (from their mobile) and creates a radius that increases in size over time. Here is what I have so far: http://alainwebdesign.ca/doglocate/example/issue-1068-circle-events-doubled.html.

The app works for the most part, but the problem is that when you move/drag the map, the radius center changes which is not what I want. I want the center of the radius to be lock in at the specified location.

Here is my HTML:

<!DOCTYPE html>

<html ng-app="app">


    <link rel="stylesheet" ****="assets/stylesheets/example.css">

    <link rel="stylesheet" ****="//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>



<div data-ng-controller="MapsCtrl">

























And here is my 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 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:


                $scope.map.circle.radius += 30;

          }, 1000);

      } ]);

})(window, angular);

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by (1.7m points)
Solved my own question. I just used Object.freeze(center) after declaring the center variable.

Related questions