feat(map): support embed

CofCat456 · Sep 1, 2023 · 2ced19c · 2ced19c
1 parent 183cfce
commit 2ced19c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/packages/map/src/components/Embed/index.ts b/packages/map/src/components/Embed/index.ts
@@ -0,0 +1,3 @@
+import Embed from './src/index.vue';
+
+export default Embed;
diff --git a/packages/map/src/components/Embed/src/index.vue b/packages/map/src/components/Embed/src/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  apiKey: string
+}
+
+const props = withDefaults(defineProps<Props & {
+  width: string
+  height: string
+  style: string
+}>(), {
+  width: '450',
+  height: '250',
+  style: 'border:0',
+});
+
+const getUrl = computed(() => {
+  return `https://www.google.com/maps/embed/v1/place?key=${props.apiKey}&q=Eiffel+Tower,Paris+France`;
+});
+</script>
+
+<template>
+  <iframe
+    frameborder="0"
+    referrerpolicy="no-referrer-when-downgrade"
+    allowfullscreen
+    :src="getUrl"
+    :width="width"
+    :height="height"
+    :style="style"
+  />
+</template>
diff --git a/packages/map/src/components/components.ts b/packages/map/src/components/components.ts
@@ -2,10 +2,12 @@ import GoogleMap from './GoogleMap';
 import MarkerClusterer from './MarkerClusterer';
 import Marker from './Marker';
 import InfoWindow from './InfoWindow';
+import Embed from '@/components/Embed';
 
 export {
   GoogleMap,
   MarkerClusterer,
   Marker,
   InfoWindow,
+  Embed,
 };