Блог

Главная - Вопросы по программированию - Почему данные автозаполнения @googlemaps/js-api-загрузчика не передаются объекту данных с привязкой к v-модели?

Почему данные автозаполнения @googlemaps/js-api-загрузчика не передаются объекту данных с привязкой к v-модели?

#javascript #vue.js #google-maps #google-maps-api-3

Вопрос:

Мой проект Vue CLI использует API Google Maps для обработки местоположений, полученных от пользователя. Загрузчик импортируется следующим образом:

 import { Loader } from "@googlemaps/js-api-loader";

И вот как он создается:

 const loader = new Loader({
  apiKey: "XXXXX",
  version: "weekly",
  libraries: ["places"]
});

У меня есть элемент ввода текста, который принимает местоположение от пользователя:

 <input type="text" v-model="origin" id="origin" placeholder="Where are you?" />

Он использует класс автозаполнения Google Maps API для предложения или автоматического заполнения адресов (код находится в созданном объекте/опции экземпляра Vue).:

 loader
  .load()
  .then(() => {
    new window.google.maps.places.Autocomplete(
      document.getElementById("origin"),
      {
        componentRestrictions: { country: "za" },
        fields: ["address_components", "geometry", "icon", "name"],
      }
    );
  });

Теперь, допустим, я хочу ввести адрес «Улица Манделы, 123, Какой-то пригород, 2021 год», и я набираю «123 млн», затем нажимаю на автоматически заполненный адрес, данные.у источника будет только «123 млн», а не полный адрес. Где я ошибаюсь?

Комментарии:

1. Прочитав еще раз руководство по автозаполнению мест, я нашел обходной путь. Я удалил привязку и добавил прослушиватель для события place_changed, и я отсортирован. По крайней мере, сейчас. Все же было бы интересно узнать, почему данные не передаются объекту данных.

Ответ №1:

В соответствии с приведенной здесь документацией Autocomplete добавляет поле ввода текста на вашу веб-страницу и отслеживает в этом поле ввод символов. Таким образом, все, что пользователь вводит в ваше поле ввода текста, остается таковым и остается единственными данными, передаваемыми объекту данных при привязке.

Добавление обработчика для place_changed события и formatted_address поля в параметрах-это практический способ получения адреса, выбранного/добавленного пользователем.

Метки: