クエーサープロジェクトでGoogle Mapsを使う方法

私は、クエーサーコミュニティを愛しています!
クエーサーコアチームメンバーの一つquasar vite working with Stackblitz ! 驚くべき.
今すぐあなたのブラウザでは、秒単位でクエーサープロジェクトを起動することができます!
そして、StackblitzのクエーサープロジェクトにおけるGoogle Maps
とにかく.
Twitterの友人はQuasarでGoogleマップを設定できる方法を尋ねました.だからここにある!

ステップ1：Vue 3をインストールするGoogleマップ

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

ステップ2 :ブートファイルを作成する

Vue Googleマップはクエーサーに“フック”する必要があります.ブートファイルでこれを行うことができます!
ダイビング🤿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.config.js Viteについてquasar.conf.js ウェブパック

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

コメントを書くとき、クエーサーに丁寧であることが重要である点に注意してください.
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>

完了!
さあ、例を挙げましょう.

<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>

そして、私のファインコーディングの友人は、Googleマップをクエーサープロジェクトに追加する方法です.

私が行く前に2つの事！

Quasarcast。コム

欲しいlearn Quasar 誰かによって示されるビデオでLOVES to code ! あなたを信じて、あなたに会いたがっている誰かbuild GORGEOUS sites with Quasar ?
ワックthis link でアカウントを作成してくださいQuasarCast.Com

2 .常に覚えている

特に時間が厳しいとき、あなたのコードのように感じるだけで動作しません.
あなたがそれを保つならば.
何かを構築することができます.