Voomap

5 個月前(已編輯)Vue, TypeScript

Easy use of Google Maps with Composition API

Voomap#

Easy use of Google Maps with Composition API

Voomap is built using Composition API and TypeScript.

📦 Install#

npm i @voomap/map

🦄 Usage#

Map#

Before using voomap, the only thing you need to do is to apply for a Google Maps API.

<script setup lang="ts"> import { GoogleMap } from '@voomap/map'; import { reactive } from 'vue'; const center = reactive<google.maps.LatLngLiteral>({ lat: 25.0855388, lng: 121.4791004, }); </script> <template> <GoogleMap :api-key="YOUR_GOOGLE_MAPS_API_KEY" :center="center" :zoom="11" /> </template>

Refer to documentations for more details.

Marker#

To make it easy for you to use Google Map, you can simply add the components you need as child components, just as easily as with element-ui!

<script setup lang="ts"> import { GoogleMap, Marker } from '@voomap/map'; import { reactive } from 'vue'; const center = reactive<google.maps.LatLngLiteral>({ lat: 25.0855388, lng: 121.4791004, }); </script> <template> <GoogleMap :api-key="VITE_GOOGLE_MAP_API_KEY" :center="center" :zoom="11"> <Marker :position="center" /> </GoogleMap> </template>

📃 Code Style#

code style

👨‍🚀 Contributors#

This project is not yet complete, and I warmly welcome feature requests and improvement suggestions. You can create an issue to initiate a discussion with me!

📄 License#

MIT License © 2023 CofCat