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>
Dog Locate
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:
$interval(function(){
$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)
