После того, как я взглянул на структуру маршрутизации, у меня появилась хорошая идея о том, как добавить компоненты Vue в качестве маршрутов и приступить к созданию сайта. Моим первым шагом было воссоздание домашней страницы текущего сайта PHP UG: карты мест встреч местных групп.
Здесь на помощь пришел список Awesome Vue с целым разделом о компонентах «Карта». Поскольку сайт в настоящее время использует Leaflet для тайлов карты, я попробовал проект Vue2Leaflet. Установка была достаточно простой, но я не смог заставить CSS работать сразу и разочаровался в попытке интегрировать тайлы карты в стиль Laravel Vue SPA.
Проект vue-google-maps работал как по маслу. Слава этим разработчикам! Было очень легко получить ключ API Google Maps и сразу загрузить карту по умолчанию. Опять же, я не очень много знал о стилях и о том, как их лучше всего настроить, но он работал с явно заданными пикселями для ширины и высоты, и этого было достаточно для начала.
Теперь, когда у меня есть рабочая область тайла карты, можно приступать к настоящей работе. С картой, расположенной на главной странице, цель состояла в том, чтобы помочь пользователям узнать, где собраться и поговорить о PHP. Если бы веб-сайт не делал ничего, кроме как связывал любопытных людей с местными группами, это считалось бы успехом.
Надоедливые разрешения
Любой, кто в наши дни проводит хоть немного времени в Интернете, хорошо знаком с приглашением «этот сайт хотел бы показывать вам уведомления». Обычно я инстинктивно нажимаю «нет» по привычке, но другие люди могут разрешить сайтам отправлять им уведомления, кто знает. По крайней мере, вы должны спросить разрешения у пользователя на случай, если уведомления станут полезными в вашем приложении.
На MDN Mozilla снова появилась отличная статья об использовании Permissions API. Как они отмечают: Исторически сложилось так, что разные API-интерфейсы непоследовательно обрабатывают свои собственные разрешения…, и вам не нужно использовать API-интерфейс разрешений для согласования этих несоответствий. Для моего приложения на данный момент мне нужно использовать только API геолокации, и даже если бы у меня было больше склонностей к использованию разрешений, единственный другой API, включенный на данный момент, — это уведомления: тот, который почти все, как я, игнорируют.
Итак, я пока не буду исследовать API разрешений и предпочту, чтобы пользователь нажимал для геолокации на предоставленной карте. Причина, по которой я не собираюсь автоматически позиционировать карту для пользователей, заключается в том, что мы не знаем точно, с чем они пришли на веб-сайт, и я не хочу дезориентировать их от их первоначальной цели хихиканьем. на первой полосе без видимой причины. Если им не нужна карта, то не показывайте им.
Примечание о расширениях браузера
Я чувствую себя обязанным упомянуть расширения браузера как еще одну причину, по которой я не пытаюсь дезориентировать пользователя при загрузке страницы. Я сталкивался со многими инцидентами на веб-сайтах, которые я посещал, когда что-то не работало при загрузке страницы, и в итоге я отключил семь или около того расширений браузера, чтобы заставить работать все функции.
Одно из расширений, которые я использую, — это VPN, которая может размещать мой IP-адрес во всевозможных случайных местах по всему миру. Я абсолютно ненавижу заходить в картографическое приложение и центрировать его на месте, которого я сейчас не нахожусь, даже если я неоднократно искал в фактическом месте, где я живу. Я говорю о вас, Google Maps. Почему ты думаешь, что я хочу начать с мест, которые я никогда не ищу?!?
ИМХО, лучше не раздражать своих пользователей, делая предположения о них и их намерениях на вашем сайте. Почему бы просто не спросить их, когда вы узнаете, почему они там? Для меня это так странно, что большинство сайтов просто предполагают, чего хочет пользователь, когда несколько тонких движений для ввода могут привести вас к тому же месту более приятным способом.
Хотя это не красиво, это начало. Страница загружает геолокацию пользователя в фоновом режиме, прежде чем пользователь решит, хотят ли они взаимодействовать с картой или нет. Если приложение ошибается, они могут ввести текст альтернативного местоположения. Теперь давайте посмотрим на детали реализации.
навигатор.геолокация
Чтобы начать с местоположения по умолчанию для центрирования карты, мы можем использовать объект navigrator.gelocation, чтобы угадать текущее местоположение пользователя. Я использовал хук жизненного цикла Vue mounted(), чтобы получить геолокацию пользователя при загрузке компонента карты.
Здесь нет ничего особенного, кроме функции gecodeLocation(). Я хотел отобразить удобочитаемое имя для пользователя, а не координаты, которые возвращает API геолокации. Для этого я использовал Google Maps API и обратное геокодирование.
Обратное геокодирование просто означает, что вы начинаете с набора координат и в конечном итоге получаете какие-то другие данные о местоположении, основанные на этих координатах, «населенный пункт» и «административная_область» в этом примере.
Когда я впервые добавил плагин Vue Google Maps, я ввел ключ API, чтобы использовать некоторые API Google в дополнение к отображению маркеров на карте. Плагин загружает объект google в объект window, который можно использовать для отправки запроса геокодирования обратно в Google.
Код становится немного запутанным при попытке найти местоположение: то, что Google использует в качестве международного заполнителя, что означает «город» в США. Конечная точка геокодирования обычно возвращает несколько местоположений, поэтому требуется дополнительная фильтрация, прежде чем будет возвращена подходящая строка. Как только я получил местоположение из результата, я использовал трюк, чтобы разделить строку на местоположение и отобразить последнюю часть переменной «formatted_address».
Теперь у нас есть ссылка для показа карты, а также обратная связь, которую нужно показать пользователю до того, как он увидит неинтересную карту.
API Google Адресов
Если пользователь хочет ввести местоположение, было бы довольно неудобно заставлять пользователя вводить свои GPS-координаты, когда Google Places API может преобразовать строку местоположения в координаты для него.
Вот почему я добавил ввод, который обращается к API Google Places для получения справки по автозаполнению. Плагин Vue Google Maps позволяет легко добавить это.
Как только результат возвращается из API и помещается в переменную place, я устанавливаю начальное местоположение, на котором центрируется карта. Ввод автозаполнения также можно использовать после отображения карты, чтобы переместить ее центр.
Первоначально я начал с центра «Боулдер, Колорадо», но я могу изменить его на «Нью-Йорк, Нью-Йорк», если захочу, нажатием клавиши.
Ничто из этого не выглядит красиво, но это начало. Мы можем реорганизовать наш подход позже, но я думаю, что на данный момент мы успешно нашли Ларри! Затем мы загрузим данные для маркеров, которые в конечном итоге будут связаны с локальными группами встреч PHP.
