указатели на карте Google @change - PullRequest
Новая
       18

указатели на карте Google @change

2 голосов
/ 01 октября 2019

Я включил google map для проекта, с которым я работаю. У меня есть несколько флажков, которые являются динамическими, и при нажатии на флажок, согласно которому эти местоположения будут отображаться на google map. Как следует : here Дело в том, что он не обновляет и не удаляет предыдущие маркеры, когда я снова или снова отмечаю или снимаю эти флажки.

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, но не смог найти лучшего решения. Ваша помощь очень ценится.

1 Ответ

1 голос
/ 04 октября 2019

Наконец изменил предыдущий код и может быть использован как , следующий за 

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. и через это маркеры будут показаны на карте. И если флажок снят снова, функция вызовет и сбросит карту. тогда он покажет только новые маркеры.

...