Quasar 프로젝트에서 Google 지도를 사용하는 방법
9688 단어 vuewebdevjavascript
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. 항상 기억하라
특히 시간이 어렵고 코드가 제대로 작동하지 않을 것 같은 경우에는 더욱 그렇습니다.
당신이 그것을 유지한다면,
무엇이든 지을 수 있습니다...
Reference
이 문제에 관하여(Quasar 프로젝트에서 Google 지도를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/quasar/how-to-use-google-maps-in-a-quasar-project-1c13텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)