inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
280 stars 57 forks source link

How to use The Google Maps API #62

Closed gh-nom closed 2 years ago

gh-nom commented 2 years ago

advanced-usage: api: The Google Maps API

I read your document and source code and found that there is an interface of Google Maps API in the source code. How do I use it? thanks! good luck.

gh-nom commented 2 years ago

Because I want to get altitude by latitude and longitude, so I need to know how to use it, right

HusamElbashir commented 2 years ago

There are several patterns to use the API. Here are some of them.

<template>
  <GoogleMap ref="mapRef">
    <template #default="{ ready, api, map, mapTilesLoaded }">
      <!-- First pattern: Here you have access to the API and map instance.
      "ready" is a boolean that indicates when the Google Maps script
      has been loaded and the api and map instance are ready to be used -->
    </template>
  </GoogleMap>
</template>

<script>
import { defineComponent, ref, computed, watch } from 'vue'
import { GoogleMap } from 'vue3-google-map'

export default defineComponent({
  components: { GoogleMap },
  setup() {
    const mapRef = ref(null)

   // Second pattern: compute some value using the API or map instance when "ready"
   markerIcon = computed(() => mapRef.value.ready
      ? {
        url: /* icon image url */,
        scaledSize: new mapRef.value.api.Size(20, 20)
      }
      : null)

    // Third pattern: watch for "ready" then do something with the API or map instance
    watch(() => mapRef.value.ready, (ready) => {
      if (!ready) return

      // do something with the api using `mapRef.value.api`
      // or with the map instance using `mapRef.value.map`
    })

    return { mapRef }
  },
})
</script>
gh-nom commented 2 years ago

After reading your reply, I suddenly found that there are related cases in advanced usage, I ignored it, sorry to bother you. Thanks!

发件人: Husam Ibrahim 发送时间: 2022年3月23日 6:26 收件人: inocan-group/vue3-google-map 抄送: Guanghua0714; Author 主题: Re: [inocan-group/vue3-google-map] How to use The Google Maps API(Issue #62)

There are several patterns to use the API. Here are some of them.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>