我的问题与这个较旧的线程有关 谷歌地图v3 设置一个半径可编辑但不是中心的圆
我和这个人一样有同样的问题，并通过地理编码zip的解决方案解决了我的问题。
但现在没有卡在另一个点上。我有一个名为byRadius的复选框，只有当这个复选框被标记时，我才想显示圆圈。如果没有，我只想显示标记。但是我无法在我的 HTML 中找到圆圈或标记，所以我不确定如何更改圆圈的可见性。
我在复选框中使用了侦听器来收听更改事件，当触发时，我想更改可见性。
$scope.$watch('vm.socialMediaFilter.byRadius', function ()
{
var circle = document.getElementById('circleModal');
console.log(vm.socialMediaFilter.byRadius);
});
地图的 HTML 标签
<div class="col-xs-12">
<ng-map id="modalMap" class="gov-map" style="display: block; height: 25vh;"</ng-map>
</div>
从控制器 + HTML 渲染的内容
(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());
}
})();
这是用作将实体保存到 My DB 的模式的控制器
而且我只想在标记"Suchradius eingrenzen"复选框时才显示圆圈。如果没有标记，我只想在中心显示标记。
模 态