クエーサープロジェクトでGoogle Mapsを使う方法
9422 ワード
私は、クエーサーコミュニティを愛しています!
クエーサーコアチームメンバーの一つquasar vite working with Stackblitz ! 驚くべき.
今すぐあなたのブラウザでは、秒単位でクエーサープロジェクトを起動することができます!
そして、StackblitzのクエーサープロジェクトにおけるGoogle Maps
とにかく.
Twitterの友人はQuasarでGoogleマップを設定できる方法を尋ねました.だからここにある!
Vue Googleマップはクエーサーに“フック”する必要があります.ブートファイルでこれを行うことができます!
ダイビング🤿
Googleマップをインストールする必要があります!
飛び込みましょう
さあ、例を挙げましょう.
欲しいlearn Quasar 誰かによって示されるビデオでLOVES to code ! あなたを信じて、あなたに会いたがっている誰かbuild GORGEOUS sites with Quasar ?
ワックthis link でアカウントを作成してくださいQuasarCast.Com
特に時間が厳しいとき、あなたのコードのように感じるだけで動作しません.
あなたがそれを保つならば.
何かを構築することができます.
クエーサーコアチームメンバーの一つ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 .常に覚えている
特に時間が厳しいとき、あなたのコードのように感じるだけで動作しません.
あなたがそれを保つならば.
何かを構築することができます.
Reference
この問題について(クエーサープロジェクトでGoogle Mapsを使う方法), 我々は、より多くの情報をここで見つけました https://dev.to/quasar/how-to-use-google-maps-in-a-quasar-project-1c13テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol