Question

我正在使用动态半径作为Google地图叠加层，但是当我更改半径时，前者保持不变。我试图删除它但无法删除它。我从这些网址引用但无法删除叠加层。

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()时，我正在尝试删除之前的叠加层。是否可以修改相同的叠加层？

Answer 1

问题是你要为新创建的圆圈设置null，而你应该将null设置为旧圆圈。

在

上创建标记时

google.maps.event.addListener(marker, 'click', function() {

你应该将它存储到某种数组或字典中，这样当你删除它时，你可以找到它并将其设置为null。

从谷歌地图中删除自定义叠加层

1 个答案: