为什么在使用 visua lstudio 代码和实时服务器时浏览到谷歌地图但现在显示任何地图?

问题描述 投票:0回答:0

这是 index.html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Api</title>

<link rel="stylesheet" href="/style.css">

    </head>
    <body>
    <h1>Google Maps</h1>
    <div id="map"></div>
    
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=I HAVE A KEY&callback=initMap">
    </script>
    <script src="/app.js"></script>
    </body>
    </html>

样式.css

#map
{
    height: 700px;
    width: 100%;
}

app.js

function initMap()
{
    var options = 
    {
        center: {las: 38.3460, lng:-0.4907 },
        zoom: 8
    }

    map = new google.maps.Map(document.getElementById("map"), options)
}

我从我在地址处的谷歌地图 Api 密钥凭据中创建的项目中获得了 Api 密钥。

https://console.cloud.google.com/google/maps-apis/welcome?project=&step=api_key

我在项目的凭据页面中创建了 Api 密钥,它不是计费帐户 Api。

然后在 visual studio 代码中,我右键单击文件 index.html 并选择“使用实时服务器打开”,然后我到达了这个站点,鼠标光标变成了谷歌地图光标,但它没有显示任何地图:

google-maps visual-studio-code
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.