1
我對Google地圖疊加層使用動態半徑，但在更改半徑時，更早的情況保持不變。我試圖刪除它，但無法。我從這些網址引用，但無法刪除覆蓋。從谷歌地圖中刪除自定義疊加層
Removing a Google maps Circle/shape
Remove google maps circle overlay within function
js代碼：
var app = angular.module('app', []);
app.controller('mapController',
function mapController($scope) {
// Data
$scope.cities = [ {
city : 'Mumbai',
lat : 19.075984,
long : 72.877656,
customRadius : 1000
}, {
city : 'New Delhi',
lat : 28.613939,
long : 77.209021,
customRadius : 1000
} ];
var mapOptions = {
zoom : 4,
center : new google.maps.LatLng(20.593684, 78.96288),
mapTypeId : google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'),
mapOptions);
$scope.markers = [];
var circle = null;
var createMarker = function(info) {
var marker = new google.maps.Marker({
map : $scope.map,
position : new google.maps.LatLng(info.lat, info.long),
title : info.city
});
google.maps.event.addListener(marker, 'click', function() {
$scope.removeRadius();
circle = new google.maps.Circle({
map : $scope.map,
radius : info.customRadius, // metres
fillColor : '#A9EEFF'
});
$scope.map.setZoom(14);
$scope.map.setCenter(marker.getPosition());
circle.bindTo('center', marker, 'position');
});
$scope.markers.push(marker);
}
$scope.newRadius = "";
$scope.changeRadius = function(index,e, selectedMarker){
$scope.removeRadius();
$scope.cities[index].customRadius = parseFloat($scope.markers[index].customRadius);
var info = $scope.cities[index];
var marker = new google.maps.Marker({
map : $scope.map,
position : new google.maps.LatLng(info.lat, info.long),
title : info.city
});
$scope.openInfoWindow(e, selectedMarker);
}
$scope.removeRadius = function() {
circle = new google.maps.Circle({
map : $scope.map,
radius : 0, // metres
fillColor : '',
fillOpacity: 0
});
circle.setMap(null);
}
for (var i = 0; i < $scope.cities.length; i++) {
createMarker($scope.cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.addLocation = function() {
var tempData = {
city : $scope.location,
lat : parseFloat($scope.latitude),
long : parseFloat($scope.longitude),
customRadius : parseFloat($scope.customRadius)
}
$scope.cities.push(tempData);
$scope.markers = [];
for (var i = 0; i < $scope.cities.length; i++) {
createMarker($scope.cities[i]);
}
$scope.location = "";
$scope.latitude = "";
$scope.longitude = "";
$scope.customRadius = "";
}
});
HTML代碼：
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google Map</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="mapController.js"></script>
<style type="text/css">
#map {
height: 420px;
width: 600px;
display: inline-block;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
#class {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body ng-controller="mapController">
<table>
<tr>
<td>Latitude</td>
<td><input type="text" ng-model="latitude" required></td>
</tr>
<tr>
<td>Longitude</td>
<td><input type="text" ng-model="longitude" required></td>
</tr>
<tr>
<td>Location</td>
<td><input type="text" ng-model="location" required></td>
</tr>
<tr>
<td>Radius</td>
<td><input type="text" ng-model="customRadius" required></td>
</tr>
<tr>
<td><button ng-click="addLocation()">Add Location to
map</button></td>
</tr>
</table>
<div id="map"></div>
<div id="class">
<ul style="list-style: none;">
<li style="padding-bottom: 10px;" ng-repeat="marker in markers"><span
ng-click="openInfoWindow($event, marker)">{{marker.title}}</span><span><input
type="text" ng-model="marker.customRadius">
<button ng-click="changeRadius($index,$event, marker)">Change Radius</button></span></li>
</ul>
</div>
當我打電話給我的功能$scope.changeRadius()，我試圖刪除先前的覆蓋。是否可以修改相同的覆蓋層？