这是 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 并选择“使用实时服务器打开”,然后我到达了这个站点,鼠标光标变成了谷歌地图光标,但它没有显示任何地图: