Создайте свой собственный компонент Vue3 Google Maps и разверните его на мобильных устройствах с помощью Ionic Framework и Capacitor

Больше видеоконтента Ionic VueJS и ReactJS FiWiC YouTube Channel

Карты являются важной частью многих веб- и мобильных решений, а богатый набор функций, предоставляемых Google Maps, делает их очевидным выбором во многих ситуациях. Когда я искал решение, совместимое с Vue3, я действительно не нашел ничего, что мне понравилось бы, поэтому я решил посмотреть, как создать свое собственное.

В этом видео мы создаем компонент карты Google vue 3, используя более новый компонент SFC с настройкой. Мы добавим маркеры, информационные окна, обработчики событий и доступ к соответствующим службам по мере работы над серией видеороликов проекта.

Мы закончим каждое видео из этой серии, развернув приложение на устройствах IOS и Android, чтобы продемонстрировать Ionic Capacitor, который вы можете использовать для развертывания любой мобильной веб-платформы, веб-приложения и PWA.

НАСЛАЖДАЙТЕСЬ ЧАСТЬЮ 1

ССЫЛКИ

• Ionic Framework — это платформа для создания, защиты, развертывания и масштабирования современных нативных и мобильных веб-приложений на любой платформе. Ни одна платформа не обеспечивает большей производительности. Спереди назад, от начала до конца
• Capacitor — это нативная среда выполнения с открытым исходным кодом для создания веб-приложений. Создавайте кроссплатформенные приложения для iOS, Android и прогрессивные веб-приложения с помощью JavaScript, HTML и CSS.
• Javascript API Карт Google
• Вопросы о Typescript в Google Maps

ИСПОЛЬЗОВАНИЕ

Компонент можно использовать на своей странице, предварительно создав файл .env для хранения ключа Google Maps.

VUE_APP_GOOGLEMAPS_KEY="AIzaSyDfu-PKZ1zO8POkdlrSWG36pLZEtbH5cz8"

и в родительском компоненте

<g-map
  :disableUI="false"
  :zoom="12"
  mapType="roadmap"
  :center="{ lat: 38.8977859, lng: -77.0057621 }">
</g-map>

ИСХОДНЫЙ КОД

<template>
  <div class="map" ref="mapDivRef"></div>
</template>
<script>
import { ref, onBeforeMount, onMounted } from "vue";
export default {
  name: "GMap",
  props: {
    center: { lat: Number, lng: Number },
    zoom: Number,
    mapType: String,
    disableUI: Boolean
  },
  setup(props) {
    // the google map object
    const map = ref(null);
    // the map element in the templste
    const mapDivRef = ref(null);
    // load in the google script
    onMounted(() => {
      // key is is the .env file
      const key = process.env.VUE_APP_GOOGLEMAPS_KEY;
      // create the script element to load
      const googleMapScript = document.createElement("SCRIPT");
      googleMapScript.setAttribute(
        "src",
        `https://maps.googleapis.com/maps/api/js?key=${key}&callback=initMap`
      );
      googleMapScript.setAttribute("defer", "");
      googleMapScript.setAttribute("async", "");
      document.head.appendChild(googleMapScript);
    });
    /**
     * this function is called as soon as the map is initialized
     */
    window.initMap = () => {
      map.value = new window.google.maps.Map(mapDivRef.value, {
        mapTypeId: props.mapType || "hybrid",
        zoom: props.zoom || 8,
        disableDefaultUI: props.disableUI || false,
        center: props.center || { lat: 38.0, lng: -77.01 }
      });
    };
    return {
      mapDivRef
    };
  }
};
</script>
<style lang="css" scoped>
.map {
  width: 100%;
  height: 300px;
  background-color: azure;
}
</style>