0
AngularJSを使用してアプリケーションを作成しようとしています。ユーザーの位置情報（モバイルからの情報）を取得し、時間とともにサイズが大きくなる半径を作成します。これまでに私が持っているものは、http://alainwebdesign.ca/doglocate/example/issue-1068-circle-events-doubled.htmlです。AngularJS with Google Maps Radius
アプリはほとんどの場合動作しますが、地図を移動/ドラッグすると、半径中心が変更されてしまい、それが問題になります。私は半径の中心が指定された位置にロックされるようにしたい。ここ
<!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>
そして、私の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);