JS Framework
Ionic
Геолокация в Ionic с использованием Parse и Back4App
12 мин
использование геоточек с фреймворком ionic введение parse позволяет вам ассоциировать реальные координаты широты и долготы с объектом добавив parsegeopoint к parseuser , вы сможете легко узнать, какой пользователь ближе к другому, показать местоположения пользователей вашего приложения, а также хранить информацию о местоположении пользователя, среди прочих возможностей вы также можете ассоциировать parsegeopoint с любым parseobject например, если ваше приложение связано с магазином с физическими филиалами, вы сможете создать страницу, чтобы показать местоположение этих магазинов или показать пользователю, какой магазин ближе всего к нему другой пример использования этой ассоциации если ваше приложение — это игра, в которой вы создали parseobjects для представления персонажей, добавление parsegeopoints к этим персонажам позволит им отображаться вдоль пути игрока этот учебник объясняет, как использовать некоторые функции parsegeopoint через back4app после прохождения этого учебника вы сможете сделать следующее предварительные требования 1 настройка ключа api google установите angular google maps agm импортируйте sdk, добавив сгенерированный ключ в /src/app/app module ts 2 получение местоположения пользователя чтобы получить местоположение пользователя, нам нужно установить плагин ionic geolocation теперь, когда мы установили и импортировали geolocation в провайдеры в /src/app/app module ts, давайте реализуем метод получения местоположения и сохраним результаты в атрибут класса 3 создайте страницу для отображения карты теперь, когда у нас есть местоположение пользователя, давайте создадим страницу для отображения карты, используя уже упомянутые \[angular google maps] сначала запустите помощник теперь давайте сделаем так, чтобы он получал маркер, который содержит текущее местоположение, которое отображает карта, и массив маркеров, которые будут точками на карте теперь давайте откроем maps html и сделаем так, чтобы он отображал данные 4 отображение текущего местоположения пользователя на карте теперь у нас есть страница для отображения местоположений на карте давайте вернемся к home ts и реализуем метод для отображения местоположения пользователя на карте давайте воспользуемся простотой parse и найдем ближайших к пользователю вы можете видеть, как это просто в основном, все, что нам нужно было сделать, это создать объект запроса для коллекции пользователей и заставить его искать ближайшее географическое местоположение, вызвав near() 5 настройка back4app для связывания parsegeopoint с parseobjects предположим, что пример приложения, которое вы создаете, связано с группой магазинов с физическими филиалами было бы интересно показать все физические филиалы этого магазина на карте для этого создайте класс магазины на панели управления back4pp, сохраните существующие магазины как parseobjects, их местоположения, и после этого приложение сможет запрашивать физические филиалы и отображать их позиции на карте следующие шаги помогут вам в этом перейдите на сайт back4app войдите в систему, найдите свое приложение и откройте его панель управления перейдите в core > browser > создать класс, как показано на изображении ниже в поле какой тип класса вам нужен?, выберите опцию пользовательский в поле как мы это назовем?, введите “ магазины ” и затем нажмите кнопку создать класс затем будет показан новый класс под названием “ магазины ” и вы должны вставить в него 2 столбца столбец с типом данных строка под названием имя, а также другой столбец с типом данных geopoint под названием местоположение ваш класс должен выглядеть так теперь заполните этот класс информацией для этого нажмите кнопку добавить строку в меню в правом верхнем углу или в середине страницы, как показано на изображении ниже затем заполните строку необходимой информацией название магазина и его широта и долгота после ввода некоторых данных ваш класс stores должен выглядеть как на изображении ниже если вы хотите ввести больше данных, вы можете нажать кнопку добавить строку вверху или кнопку + под последней строкой данных теперь вы готовы использовать информацию о местоположении магазинов в вашем приложении 6 отобразите местоположение всех магазинов на карте теперь, когда у нас есть сохраненное местоположение магазинов, давайте напишем метод для получения объектов и их отображения просто, правда? теперь давайте найдем ближайший вы можете видеть, что это так же, как и получение ближайшего пользователя, как мы делали ранее 7 добавьте кнопки на главную страницу вы, вероятно, заметили, что у нас нет способа вызвать эти методы, давайте добавим кнопки в home ts и сделаем это! 8 протестируйте ваше приложение войдите на сайт back4app https //www back4app com/ найдите ваше приложение и нажмите на панель управления > ядро > браузер > пользователь и создайте несколько пользователей с привязанным к ним местоположением, чтобы метод getclosestuser работал запустите ваше приложение на реальном устройстве или в браузере, чтобы зарегистрироваться и войти попробуйте все функции! готово! на этом этапе вы можете использовать некоторые функции parsegeopoint через back4app!