Quasar 프로젝트에서 Google 지도를 사용하는 방법

나는 Quasar 커뮤니티를 정말 좋아합니다!

Quasar 핵심 팀원 중 한 명(Yusuf)이 quasar vite working with Stackblitz을 얻었습니다! 놀라운.

이제 브라우저에서 몇 초 만에 Quasar 프로젝트를 시작할 수 있습니다!

Stackblitz의 Quasar 프로젝트에 있는 Google 지도는 다음과 같습니다.



아무나...

Twitter에서 내 친구가 Quasar로 Google 지도를 설정하는 방법을 물었습니다. 여기 있습니다!

1단계: Vue 3 Google 지도 설치

npm install -S @fawmi/vue-google-maps
# or
yarn add @fawmi/vue-google-maps

2단계: 부트 파일 생성

Vue Google Maps는 Quasar에 "연결"되어야 합니다. 부트 파일로 이 작업을 수행할 수 있습니다!

다이빙 🤿src/boot/google-maps.js

import { boot } from 'quasar/wrappers';
import VueGoogleMaps from '@fawmi/vue-google-maps';

export default boot(({ app }) => {
  app.use(VueGoogleMaps, { // 🤿 Vue App. Please install Vue Google Maps
    load: {
      key: '', // 🤿 I don't have a google key, so leave it blank for now
    },
  });
});

현재 이 파일은 아무 작업도 수행하지 않습니다. Quasar에게 그것에 대해 알려야 하므로 다음을 추가하십시오.
vite의 경우 quasar.config.js, webpack의 경우 quasar.conf.js

module.exports = configure(function (/* ctx */) {
  return {
    //...
    boot: ['google-maps'], // 🤿 Quasar, please run this bootfile at startup!
    // ...
  }
}

댓글을 작성할 때 Quasar에게 예의를 갖추는 것이 중요합니다.

이제 Google 지도를 설치해야 합니다!

2단계: 지도 구성 요소 만들기

IndexPage.vue를 살펴보고 지도 구성 요소를 추가하여 모든 것이 작동하는지 확인하십시오!

<template>
  <q-page>
    <div style="height: calc(100vh - 50px)">
      <!-- 🤿 Vue, please render the Google Map Component here -->
      <GMapMap
        :center="center"
        :zoom="10"
      />
    </div>
  </q-page>
</template>

<script setup>
const center = { lat: 51.093048, lng: 6.84212 };
</script>

완료!

이제 더 완전한 예에서 squiz를 살펴보겠습니다.

<template>
  <q-page>
    <div style="height: calc(100vh - 50px)">
      <GMapMap
        :center="center"
        :zoom="10"
        map-type-id="terrain"
      >
        <GMapCluster :zoomOnClick="true">
          <GMapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center = m.position"
          />
        </GMapCluster>
      </GMapMap>
    </div>
  </q-page>
</template>

<script setup>
const center = { lat: 51.093048, lng: 6.84212 };
const markers = [
  {
    position: {
      lat: 51.093048,
      lng: 6.84212,
    },
  },
  {
    position: {
      lat: 51.198429,
      lng: 6.69529,
    },
  },
  {
    position: {
      lat: 51.165218,
      lng: 7.067116,
    },
  },
  {
    position: {
      lat: 51.09256,
      lng: 6.84074,
    },
  },
];
</script>

그리고 내 훌륭한 코딩 친구는 Quasar 프로젝트에 Google 지도를 추가하는 방법입니다.

가기 전에 두 가지!

1. QuasarCast.Com

원하는 사람 learn Quasar이 동영상으로 제공하는 LOVES to code ! 당신을 믿고 보고 싶은 사람build GORGEOUS sites with Quasar ?

Wack this link 및 QuasarCast.Com에서 계정을 만드십시오.

2. 항상 기억하라

특히 시간이 어렵고 코드가 제대로 작동하지 않을 것 같은 경우에는 더욱 그렇습니다.

당신이 그것을 유지한다면,

무엇이든 지을 수 있습니다...