나만의 Vue3 Google Maps 구성 요소를 만들고 Ionic Framework 및 Capacitor를 사용하여 모바일에 배포

Ionic Framework 및 Capacitor로 나만의 Vue3 Google Maps 구성 요소 만들기

더 많은 Ionic VueJS 및 ReactJS 비디오 콘텐츠

지도는 많은 웹 및 모바일 솔루션의 중요한 부분이며 Google 지도에서 제공하는 풍부한 기능 세트는 많은 상황에서 분명한 선택입니다. Vue3 호환 솔루션을 찾고 있었을 때 정말 마음에 드는 것을 찾지 못했기 때문에 직접 롤링하는 방법을 보기로 결정했습니다.

이 비디오에서는 설정과 함께 최신 SFC 구성 요소를 사용하여 vue 3 google 지도 구성 요소를 만듭니다. 프로젝트 비디오 시리즈를 진행하면서 마커, 정보 상자, 이벤트 핸들러 및 관련 서비스에 대한 액세스를 추가할 것입니다.

모든 웹 프레임워크 모바일, 웹 및 pwa를 배포하는 데 사용할 수 있는 Ionic Capacitor를 보여주기 위해 애플리케이션을 IOS 및 Android 장치에 배포하여 시리즈의 각 비디오를 종료합니다.

1부 즐기기

연결

Ionic Framework은 모든 플랫폼에서 최신 기본 및 모바일 웹 앱을 빌드, 보안, 배포 및 확장할 수 있는 플랫폼입니다. 더 많은 생산성을 보장하는 플랫폼은 없습니다. 앞에서 뒤로, 처음부터 끝까지

Capacitor은 웹 네이티브 앱을 구축하기 위한 오픈 소스 네이티브 런타임입니다. JavaScript, HTML 및 CSS를 사용하여 교차 플랫폼 iOS, Android 및 Progressive Web App 생성]

Google Maps Javascript API https://developers.google.com/maps/documentation/javascript/overview

Questions about Typescript In Google Maps

용법

Google 지도 키를 보관할 .env 파일을 먼저 생성하여 페이지에서 구성요소를 사용할 수 있습니다.

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>