Автор оригинала: Mohamed Termoul.
Создание приложения для хранения Locator с использованием Vue, Cosmic JS и Google Maps
TL; DR:
Демонстрация
Исходный код (GitHub)
Cosmic JS Backeng Funcion
Google Maps JavaScript API
Vue js и vuex
Vue-Google Maps
вступление
Это небольшое приложение может быть использовано для разрешения пользователей искать и находить свои магазины. Если магазины не имеют отношения к вашему бизнесу, вы можете найти свои офисы, филиалы, склады … или все, что ваш бизнес находится в. Чтобы сделать эту работу, вам необходимо определить список ваших мест, которые пользователь может найти и найти.
Бэкэнда
Использование Cosmic JS может сохранять вам много времени, потому что он позволит вам сохранить ваши данные, а также иметь API для отдыха без каких-либо дополнительных кодировков. С целью этого приложения я использовал следующие особенности Cosmic JS:
- Ведные объекты: для хранения данных на бэкэнде, как города, состояния, где доступны магазины.
- Ведро СМИ: Для хранения изображений приложений и значки Google Maps. Это очень удобно иметь данные и средства массовой информации, хранящиеся в одном месте.
- Веб-хостинг: Для проведения моего приложения я использовал Cosmic JS, однако вы также можете использовать Cosmic JS для развертывания вашего приложения в другие услуги хостинга.
Dashboard Cosmic JS – добавление городов, где ваш магазин доступен
Запуск вашего VUE-приложения
После установки Vue-CLI вы можете запустить следующие команды, чтобы начать создание вашего приложения
$ npm install -g vue-cli $ vue init webpack store-locator $ cd store-locator $ npm install $ npm install --save vuex vuetify vue-router vue-resource vue-googlemaps cosmicjs moment $ npm run dev
Приложение Vue будет иметь два основных компонента:
- Searchpanel.vue: позвольте пользователю выбирать город и получить список магазинов
- Mappanel.vue: отображение соответствующей карты с маркером для каждого магазина
Вы можете легко создать макет приложений с Vuetify Сетка без необходимости писать много CSS.
Добавление государственного управления с Vuex и Cosmic JS
import Vue from 'vue' import Vuex from 'vuex' import VueResource from 'vue-resource' import Cosmic from '../api/cosmic' Vue.use(Vuex) Vue.use(VueResource) export default new Vuex.Store({ state: { userLocation: {}, selectedLocation: {}, selectedStore: null, availableLocations: {}, stores: [] }, getters: { ... }, mutations: { ... }, actions: { ... } })
Нам нужно позвонить в Cosmic JS REST API, когда приложение создано для извлечения городов, которые будут использоваться в поисках. Таким образом, в коде ниже двух вещей стоит упомянуть. Сначала мы являемся компонентом инициализированными VuegoOglemaps с Google_api_key
который предоставляется из Консоль API Google Отказ Во-вторых, мы называем Это. $ store.dispatch ('fetchcities')
Заполнить Доступность
В файле хранилища Vuex. Мы также можем позвонить Это $ Store.dispatch ('fetchstorecardimages')
Это позвонит API COSMIC JS REST, чтобы получить все изображения, хранящиеся в папках медиа.
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import VueGoogleMaps from 'vue-googlemaps' import 'vue-googlemaps/dist/vue-googlemaps.css' import App from './App' import router from './router' import store from './store' Vue.use(Vuetify) Vue.use(VueGoogleMaps, { load: { // put your google API key either in the ./config/local.env.js file or just hardcode in the string below apiKey: process.env.VUE_APP_GOOGLE_API_KEY || '', libraries: ['places'], useBetaRenderer: false } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '', created () { this.$store.dispatch('fetchMapIcons') this.$store.dispatch('fetchCities') this.$store.dispatch('fetchStoreCardImages') } })
Это код, чтобы позвонить, чтобы настроить Cosmic JS REST API. Вы можете получить API Read, и записывайте клавиши после регистрации, и добавьте свое ведро.
const config = { bucket: { slug: process.env.COSMIC_BUCKET || 'store-locator', read_key: process.env.COSMIC_READ_KEY, write_key: process.env.COSMIC_WRITE_KEY }, object_type: 'cities' } export default config
Ведро – корневой контейнер для всех данных, файлов, изображений для вашего приложения.
import Cosmic from 'cosmicjs' import Config from './config' export default Cosmic().bucket(Config.bucket)
В коде ниже, как вы можете видеть в FetchCities
Действие, которое мы называем Cosmic JS API, чтобы выбрать все объекты типовых городов и петлей через массив результатов и создать еще один объект для популярного магазина Доступность
Переменная, которая, в свою очередь, будет использоваться в компоненте поиска поиска для отображения списка доступных местоположений.
... actions: { ... fetchCities ({commit, dispatch, state}) { // will populate the cities from cosmic js REST API const params = { type_slug: 'cities' } Cosmic.getObjectsByType(params) .then(data => { let locations = {} let country = '' data.objects.forEach(city => { const cityKey = city.slug.toUpperCase() const stateKey = city.metadata.state.slug.toUpperCase() ... locations[stateKey][cityKey].city = city.title locations[stateKey][cityKey].state = city.metadata.state.title locations[stateKey][cityKey].postalCode = city.metadata.postal_code locations[stateKey][cityKey].dataUrl = city.metadata.data_url locations[stateKey][cityKey].country = country locations[stateKey][cityKey].geoPoint = { latitude: city.metadata.lat, longitude: city.metadata.lng } }) commit('SET_AVAILABLE_LOCATIONS', locations) // set the initial default location dispatch('updateSelectedLocation', {state: 'FL', city: 'ORLANDO', postalCode: '32821'}) }) .catch(err => { console.log(err) }) } }
Также очень похожи, мы можем назвать Cosmic JS REST API для привлечения изображений и хранить их в магазине Vuex, используя Cosmic.getmedia (...)
... action: { ... fetchStoreCardImages ({commit}) { // will get the images from Cosmic js media folder and store in vuex const params = { folder: 'store-card-images' } Cosmic.getMedia(params) .then(data => { commit('SET_STORE_CARD_IMAGES', data.media) }) .catch(err => { console.log(err) }) } ... }
Добавление Google Map в ваше приложение Vue
Чтобы отобразить карту, я использовал Vue-googlemaps Компонент, который легко использовать Vue компонент, который действует как обертка вокруг Google Maps JavaScript API Отказ Для того, чтобы нарисовать карту, вам нужно предоставить Mapcenter
точка, который является геокодом определенного местоположения. Например, Orlando Center Downtown есть следующие геоподъемники {широта: 30.325974, долгота: -81.660454}
Отказ Также, чтобы нарисовать маркер на карте, которая представляет собой магазин или специальное расположение, вам нужен геоподъемник, заголовок и значок. С целью этого приложения я сохранил геолокацию разных городов, а магазины в Cosmic JS Backend.
Вы можете спросить, как мне получить геолокации для моего домашнего адреса или рабочего офиса. Там несколько услуг, которые могут преобразовать регулярный адрес в геолокацию и наоборот. Но самый простой способ, чтобы открыть Google Maps и нажмите на любую точку на карте. Тогда вы увидите снизу геоподъемность этого местоположения.
Google Maps показывает геолокацию выбранной точки
Вот код для нарисования карты при запуске приложения