Question

我为正在处理的项目添加了google map。我有几个动态复选框，当单击某个复选框时，根据这些位置将显示在google map上。遵循：的问题是，当我一次又一次地选中或取消选中那些复选框时，它并没有刷新并删除以前的标记。

Vue Component ：

<div v-for="vnos in vehicle_nos">
     <input class="" type="checkbox" name="vehicle_num" :value="vnos.name" v-model="vehicle_nums" @change="getVehicleNumbers(vehicle_nums)">
     <label for="vehicle_num">{{vnos.name}}</label><br>
</div>

功能我触发：

getVehicleNumbers(vehicle_num){
          this.allSelectedVehicles = vehicle_num;

          axios.post('gps/get-gps-location/'+this.allSelectedVehicles)
            .then(response => {
              for (let i = 0; i < response.data.data.length; i++) {
                this.all_data = JSON.parse(response.data.data[i]);
                this.longtitudes = this.all_data.item.pos.x;
                this.latitudes = this.all_data.item.pos.y;

                let longlatitude = this.latitudes+','+this.longtitudes;
                this.geocoder = new google.maps.Geocoder;
                this.infowindow = new google.maps.InfoWindow;
                //here I pass those coordinates to geocodeLatLng() function
                this.geocodeLatLng(this.geocoder, this.map, this.infowindow, longlatitude); 
              }
            }).catch(Erors => {
              console.log('errors');
          });
        },
        geocodeLatLng(geocoder, map, infowindow, longlatitude = null) {

          var input = longlatitude;
          var latlngStr = input.split(',', 2);
          var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
              //latlng looks like '6.916333,79.861018' this
          geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === 'OK') {
              if (results[0]) {
                map.setZoom(11);
                var marker = new google.maps.Marker({
                  position: latlng,
                  map: map,
                });
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);

              } else {
                // alert('No results found');
              }
            } else {
              // alert('Geocoder failed due to: ' + status);
            }
          });
        },

在我的 controller 中，我将数据作为数组传递给此axios.post('gps/get-gps-location/'+this.allSelectedVehicles)中的响应。

然后我将所有这些循环，并逐个设置标记。但是我需要从google map中删除所有标记，并显示即将到来的响应数据。它不会删除，并且还会显示即将出现的标记以及现有标记。因此，在同一点上几乎没有标记。

我也尝试了大多数给定的示例和stackoverfow上的链接，但找不到更好的解决方案。非常感谢您的帮助。

Answer 1

最后更改了先前的代码，可以将其用作跟进

getVehicleNumbers(vehicle_num){
    this.loading = false;

    if (vehicle_num.length == 0) {
         this.allSelectedVehicles = 0;
    } else {
         this.allSelectedVehicles = vehicle_num;
    }

    axios.post('gps/get-gps-location/'+this.allSelectedVehicles)
    .then(response => {

        this.deleteMarkers();
        for (let i = 0; i < response.data.data.length; i++) {
            this.all_data = JSON.parse(response.data.data[i]);
            this.longtitudes = this.all_data.item.pos.x;
            this.latitudes = this.all_data.item.pos.y;

            let longlatitude = {lat: this.latitudes, lng: this.longtitudes};

            this.addMarker(longlatitude);

            this.loading = true;
        }
    }).catch(Erors => {
        this.loading = true;
    });
},
addMarker(location) {

    let marker = new google.maps.Marker({
        position: location,
        map: this.map,
    });
    this.markersArray.push(marker);

},
setMapOnAll(map) {
    for (var i = 0; i < this.markersArray.length; i++) {
        this.markersArray[i].setMap(map);
    }
},
clearMarkers() {
    this.setMapOnAll(null);
},
deleteMarkers() {
    this.clearMarkers();
    this.markersArray = [];
},

一旦检查checkbox，它将触发getVehicleNumbers功能。并且标记将显示在地图中。如果再次取消选中该复选框，则该功能将触发并重置地图。那么它将仅显示新标记。

指向Google地图@change上的标记

1 个答案: