Angular/Ionic 应用程序中的谷歌地图中只有 1 个标记被删除

Question

我在 Ionic/Angular 应用程序中使用 Google 地图，但无法删除标记。我在用 https://developers.google.com/maps/documentation/javascript/examples/marker-remove

作为指南，但遇到了麻烦。在应用程序中，当用户点击地图时，1 个标记会被系上（这是在初始化函数中）。调用 getResult() 时会放置另一个标记。当我尝试清除标记时，我无法删除通过点击地图放置的标记。但是另一个标记被删除。我不确定为什么会这样。有什么建议吗？

  $scope.initialise = function() {

    $ionicLoading.show({
            content: 'Loading',
            animation: 'fade-in',
            showBackdrop: true,
            maxWidth: 200,
            showDelay: 0,
            duration: 5000
          });

            var myLatlng = new google.maps.LatLng(37.758446, -122.411789);
            $scope.markersArray = [];

            //Initial settings for the map
            var mapOptions = {
                    center: myLatlng,
                    zoom: 2,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]

                };

            //Load the initial map
             var map = new google.maps.Map(document.getElementById("map"), mapOptions); 


            //Event listener to add a marker      
            google.maps.event.addListener(map, 'click', function(e) {

              $scope.clearOverlays();
              $scope.coordinates = e.latLng;
              $scope.placeMarker(e.latLng, $scope.map);

            });

            //Actual function to add a marker
            $scope.placeMarker = function(position, map) {

              var marker = new google.maps.Marker({
                position: position,
                map: map
              });

              $scope.markersArray.push(marker);

              map.panTo(position);

            }

            $scope.clearOverlays = function() { 

              for (var i = 0; i < $scope.markersArray.length; i++ ) {
                $scope.markersArray[i].setMap(null);
              }
              $scope.markersArray = [];
            }

            $scope.map=map;

      $ionicLoading.hide(); 

      };
      // End of initialise

    google.maps.event.addDomListener(window, 'load', $scope.initialise());


  $scope.getResult = function() {
            // Add actual coordinates to map
        actualCoor = new google.maps.LatLng(Number($scope.active_location.Lat), Number($scope.active_location.Long));
        $scope.placeMarker(actualCoor, $scope.map);

      // Resize the map
        window.setTimeout(function(){
          google.maps.event.trigger(map, 'resize');
        },100);

        // Add actual coordinates to map
        actualCoor = new google.maps.LatLng(Number($scope.active_location.Lat), Number($scope.active_location.Long));
        $scope.placeMarker(actualCoor, $scope.map);

        // Resize the map
        window.setTimeout(function(){
          $scope.map.panTo($scope.coordinates);
        },100);

        // Add circle overlay to map
        $scope.circle = new google.maps.Circle({
          map: $scope.map,
          center: actualCoor,
          radius: 500000,  //500km away
          strokeColor:"#0000FF",
          strokeOpacity:0.8,
          strokeWeight:2,
          fillColor:"#0000FF",
          fillOpacity:0.4
        });

        // Add line between points
        var flightPlanCoordinates = [$scope.coordinates, actualCoor];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        flightPath.setMap($scope.map);


        // Show info window for user's guess 
        $scope.infowindow = new google.maps.InfoWindow({
            content: 'Your guess'
        });

        var marker = new google.maps.Marker({
          position: $scope.coordinates,
          map: $scope.map,
          title: 'Your guess'
        });

        $scope.infowindow.open($scope.map,marker);
  }

    $scope.reset_map = function() {



        console.log($scope.markersArray[0]);
        $scope.markersArray[0].setMap(null);
        console.log($scope.markersArray[0]);

        console.log($scope.markersArray[1]);
        $scope.markersArray[1].setMap(null);
        console.log($scope.markersArray[1]);

        $scope.markersArray = [];

        // Remove line
        flightPath.setMap(null);

        // Remove circle
        $scope.circle.setMap(null);

        // Remove infowindow
        $scope.infowindow.close();
        $scope.infowindow = null;

        // $scope.clearOverlays();


      }

我很确定这种情况正在发生，因为我正在添加信息窗口和标记以在加载时显示，但我不确定如何修复它。

Answer 1

您没有将您为信息窗口创建的标记推送到markersArray。这就是它没有被删除的原因。只需添加这些行。

$scope.markersArray.push(marker); // Add this line
$scope.infowindow.open($scope.map,marker);