Google 地图上的指向标记 @change

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

pointing markers on Google map @change

javascript

google-maps

geolocation

vue.js