Your code has three problems:

Question

我是网络发展的新鲜事,SvelteKit也是如此。我试图展示谷歌地图,标有点号。这些地点来自坐标。我在这里和红德找到了几个类似的职位,但我无法取得任何进展。

我得以从最高范例。

我在违约后加页。与该项目一起创建的假文件:

<script> 

(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "API_KEY", v: "weekly"});

   let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
</script>

<div id="map"></div>

<svelte:head>
    <script async src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script type="module" src="./index.js"></script>
</svelte:head>

<style>
    #map {
  height: 100%;
  width: 100%;
    }
</style>

Answer 1

Repo with fixes:

Branch: https://github.com/Leftium/kit-demos/tree/google-maps
Commit: https://github.com/Leftium/kit-demos/commit/3800c5d8e5e514ba22e05df3cd8d693a3c9105b3
Live demo ("best practices" version): https://kit-demos-git-google-maps-leftium.vercel.app/

Your code has three problems:

1. Missing `./index.js`

Diagnosed by:read wrong in local services console afterloading page.

Fix: 删去<script> tag from RUS.

2. Referencing `document` outside browser context.

Diagnosed by:,read wrong in local services console afterloading page (with #1)。或检查青.树脂中的错误。

onMount(。 (Alternatively use SvelteKit browser )

3. `#map` element has 0px height.

Diagnosed by: Inspectioning elements in browser dev instruments.

Fix: 调整中央支助事务。 (标准固定装置是使用px,更好的固定装置是确保母体具有非零高度。)

UPDATE: I updated the project with (SvelteKit) best practices:

Use @googlemaps/js-api-loader.
Use bind instead of id
Use element style props
Use 100% height
Don t commit sensitive data like API keys

每项改动都用于个人承诺:https://github.com/Leftium/kit-demos/commits/google-maps/。

最后的法典就是这样:

<script lang="ts">
    import  ../app.css ;
    import { onMount } from  svelte ;
    import { Loader } from  @googlemaps/js-api-loader ;

    import { PUBLIC_GOOGLEMAPS_API_KEY } from  $env/static/public ;

    // Bindings
    let mapElement: HTMLElement;

    onMount(async function () {
        const loader = new Loader({
            apiKey: PUBLIC_GOOGLEMAPS_API_KEY,
            version:  weekly 
        });

        const { Map } = await loader.importLibrary( maps );

        let map = new Map(mapElement, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    });
</script>

<div bind:this={mapElement} style:height={ 100% } style:width={ 100% } />

Repo with fixes:

Your code has three problems:

1. Missing ./index.js

2. Referencing document outside browser context.

3. #map element has 0px height.

UPDATE: I updated the project with (SvelteKit) best practices:

友情链接

1. Missing `./index.js`

2. Referencing `document` outside browser context.

3. `#map` element has 0px height.