我的问题与这个较旧的帖子Google Maps v3 setting a circle with editable radius but not center
有关我遇到了像这个家伙一样的问题，并通过geocodezip的解决方案解决了我的问题。
但现在没有停留在另一点上。我有一个名为byRadius的复选框，只有在选中此复选框时我才会显示该圆圈。如果没有，我只想显示标记。但是我无法在HTML中找到圆圈或标记，因此我不确定如何更改圆圈的可见性。
我在我的复选框上使用了一个监听器来监听change-event，当我被解雇时，我想改变可见性。
@Configuration
public class WsClientConfiguration {
@Bean
public ESignatureProcessorClient eSignatureProcessorClient() {
ESignatureProcessorClient client = new ESignatureProcessorClient();
client.setWebServiceTemplate(mwWebServiceTemplate());
return client;
}
@Bean
public WebServiceTemplate mwWebServiceTemplate() {
Jaxb2Marshaller marshaller = new Jaxb2Marshaller();
marshaller.setContextPath("cz.csas.services.esignatureprocessor.v02_02");
WebServiceTemplate template = new WebServiceTemplate(marshaller, marshaller);
template.setDefaultUri("https://osb-st2.vs.csin.cz:5001/CSMW/WS_MW_ESignatureProcessor_v02_02");
template.setMessageSender(defaultMwMessageSender());
return template;
}
@Bean
public HttpComponentsMessageSender defaultMwMessageSender() {
HttpComponentsMessageSender messageSender = new HttpComponentsMessageSender();
messageSender.setCredentials(new UsernamePasswordCredentials("user", "password"));
return messageSender;
}
}
地图的HTML标签
$scope.$watch('vm.socialMediaFilter.byRadius', function ()
{
var circle = document.getElementById('circleModal');
console.log(vm.socialMediaFilter.byRadius);
});
答案 0 :(得分：0)
(function () {
'use strict';
angular
.module('kokosGisApp')
.controller('SocialMediaFilterDialogController', SocialMediaFilterDialogController);
SocialMediaFilterDialogController.$inject = ['Principal', '$timeout', '$rootScope', '$scope', '$stateParams', '$uibModalInstance', 'entity', 'SocialMediaFilter', 'User', 'NgMap'];
function SocialMediaFilterDialogController(Principal, $timeout, $rootScope, $scope, $stateParams, $uibModalInstance, entity, SocialMediaFilter, User, NgMap) {
var vm = this;
vm.socialMediaFilter = entity;
vm.clear = clear;
vm.save = save;
vm.users = User.query();
if (vm.socialMediaFilter.mapInit == 0) {
vm.socialMediaFilter.type = "Facebook";
vm.socialMediaFilter.radius = 150;
vm.socialMediaFilter.address = $rootScope.res[0];
vm.socialMediaFilter.city = $rootScope.res[1];
vm.socialMediaFilter.latitude = $rootScope.mouseEventLatLng.lat();
vm.socialMediaFilter.longitude = $rootScope.mouseEventLatLng.lng();
} else if (vm.socialMediaFilter.mapInit == 1) {
vm.socialMediaFilter.type = "Facebook";
vm.socialMediaFilter.radius = 150;
vm.socialMediaFilter.address = '';
vm.socialMediaFilter.city = '';
vm.socialMediaFilter.latitude = 50.875863;
vm.socialMediaFilter.longitude = 8.0168847;
}
Principal.identity().then(function (user) {
vm.socialMediaFilter.user = user;
});
$timeout(function () {
angular.element('.form-group:eq(1)>input').focus();
});
function clear() {
$uibModalInstance.dismiss('cancel');
}
function save() {
NgMap.getMap({id: 'modalMap'}).then(function (map) {
if (typeof this.map.shapes !== 'undefined') {
vm.socialMediaFilter.latitude = map.shapes.circleModal.center.lat();
vm.socialMediaFilter.longitude = map.shapes.circleModal.center.lng();
vm.socialMediaFilter.radius = map.shapes.circleModal.radius;
} else {
vm.socialMediaFilter.latitude = map.markers.markerModal.position.lat();
vm.socialMediaFilter.longitude = map.markers.markerModal.position.lng();
vm.socialMediaFilter.radius = null;
}
});
vm.isSaving = true;
if (vm.socialMediaFilter.id !== null) {
SocialMediaFilter.update(vm.socialMediaFilter, onSaveSuccess, onSaveError);
} else {
SocialMediaFilter.save(vm.socialMediaFilter, onSaveSuccess, onSaveError);
}
}
function onSaveSuccess(result) {
$scope.$emit('kokosGisApp:socialMediaFilterUpdate', result);
$uibModalInstance.close(result);
vm.isSaving = false;
}
function onSaveError() {
vm.isSaving = false;
}
$scope.$watch('vm.socialMediaFilter.byRadius', function ()
{
if (vm.socialMediaFilter.byRadius) {
$scope.circle.visible = false;
} else $scope.circle.visible = true;
});
/**
* A distance widget that will display a circle that can be resized and will
* provide the radius in km.
*
* @param {google.maps.Map} map The map to attach to.
*
* @constructor
*/
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
// draggable: true, // <-- change to make so position doesn't move
title: 'Move me!',
id: 'markerModal'
});
// Bind the marker map property to the DistanceWidget map property
marker.bindTo('map', this);
// Bind the marker position property to the DistanceWidget position
// property
marker.bindTo('position', this);
// Create a new radius widget
$scope.radiusWidget = new RadiusWidget();
// Bind the radiusWidget map to the DistanceWidget map
$scope.radiusWidget.bindTo('map', this);
// Bind the radiusWidget center to the DistanceWidget position
$scope.radiusWidget.bindTo('center', this, 'position');
// Bind to the radiusWidgets' distance property
this.bindTo('distance', $scope.radiusWidget);
// Bind to the radiusWidgets' bounds property
this.bindTo('bounds', $scope.radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/**
* A radius widget that add a circle to a map and centers on a marker.
*
* @constructor
*/
function RadiusWidget() {
$scope.circle = new google.maps.Circle({
strokeWeight: 2,
color: 'orange',
visible: true
});
// Set the distance property value, default to 10km.
this.set('distance', 150);
// Bind the RadiusWidget bounds property to the circle bounds property.
this.bindTo('bounds', $scope.circle);
// Bind the circle center to the RadiusWidget center property
$scope.circle.bindTo('center', this);
// Bind the circle map to the RadiusWidget map
$scope.circle.bindTo('map', this);
// Bind the circle radius property to the RadiusWidget radius property
$scope.circle.bindTo('radius', this);
// this.bindTo('byRadius', vm.socialMediaFilter.byRadius);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
// RadiusWidget.prototype.byRadius_changed = function () {
// console.log('dasdas');
// }
/**
* Update the radius when the distance has changed.
*/
RadiusWidget.prototype.distance_changed = function () {
this.set('radius', this.get('distance'));
};
/**
* Add the sizer marker to the map.
*
* @private
*/
RadiusWidget.prototype.addSizer_ = function () {
var sizer = new google.maps.Marker({
draggable: true,
visible: true
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function () {
// As the sizer is being dragged, its position changes. Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var min = 0.5;
var max = 2500;
var pos = me.get('sizer_position');
var center = me.get('center');
var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos);
if (distance < min) {
me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, min, google.maps.geometry.spherical.computeHeading(center, pos)));
} else if (distance > max) {
me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, max, google.maps.geometry.spherical.computeHeading(center, pos)));
}
// Set the circle distance (radius)
me.setDistance();
});
};
/**
* Update the center of the circle and position the sizer back on the line.
*
* Position is bound to the DistanceWidget so this is expected to change when
* the position of the distance widget is changed.
*/
RadiusWidget.prototype.center_changed = function () {
var bounds = this.get('bounds');
// Bounds might not always be set so check that it exists first.
if (bounds) {
var lng = bounds.getNorthEast().lng();
// Put the sizer at center, right on the circle.
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
/**
* Set the distance of the circle based on the position of the sizer.
*/
RadiusWidget.prototype.setDistance = function () {
// As the sizer is being dragged, its position changes. Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos);
// Set the distance property for any objects that are bound to it
this.set('distance', distance);
};
function initMap() {
NgMap.getMap({id:'modalMap'}).then(function (map) {
map.setCenter(new google.maps.LatLng(vm.socialMediaFilter.latitude, vm.socialMediaFilter.longitude));
var currentCenter = map.getCenter();
map.setZoom(15);
google.maps.event.trigger(map, 'resize');
map.setCenter(currentCenter);
var distanceWidget = new DistanceWidget(map);
// google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
// displayInfo(distanceWidget);
// });
//
// google.maps.event.addListener(distanceWidget, 'position_changed', function () {
// displayInfo(distanceWidget);
// });
}
);
}
google.maps.event.addDomListener(window, 'load', initMap());
}
})();
这是用作将实体保存到我的数据库的模式的控制器
如果标记了“Suchradius eingrenzen”复选框，我只想显示圆圈。如果没有标记，我只想在中心显示标记。
