Question

我目前正在尝试根据相当大的Ember项目加载谷歌地图。

由于项目的负载时间比我想要的要长。所以由于这个原因，我试图让加载页面的UI变得更好，而且目前还很平淡。我的目标是在此页面中实现一个简单的谷歌地图API，不需要很长时间来呈现，只读取一定数量的变量，例如lat，long，zoom level和max zoom。

我还想异步加载地图以提高性能。

我已将脚本放在下面的单独HTML文档中，因此我的其他代码并不难理解。我猜我的代码中某处只有一个愚蠢的错误。

非常感谢能够解决我白痴的人！

<html>
<head>
<title>Map Load</title>
<style>
#map {
height: 953px;
width: 1630px;
position: absolute;
}
</style>
</head>
<body>
<h1>Loading map using async and defer attributes for loading page</h1>
    <div id="map"></div>

<script>
function init() {
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates
    var mapOptions = {
        center: myLatlng,
        zoom: 6, // The initial zoom
        minZoom: 6, // Minimum zoom
        maxZoom: 15 // Maximum zoom
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div
}
</script>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTy18qtBZ6L1FnlbeVVk2IhMysFBqJb68&callback=init"
    async defer></script>
</body>
</html>

Answer 1

您的代码中有三个错误：

myLatlng未在mapOptions

你宣布var map = ...两次，第一次错了，因为第一次也没有声明mapOptions。

function init() {
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates
    var mapOptions = {
        center: myLatlng,
        zoom: 6, // The initial zoom
        minZoom: 6, // Minimum zoom
        maxZoom: 15 // Maximum zoom
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div
}

对您的功能的错误引用，而不是initMap使用init

<script src="https://maps.googleapis.com/maps/api/js?callback=init" async defer></script>

我的JavaScript代码没有呈现我的谷歌地图

1 个答案: