我目前正在尝试加载基于相当大的 Ember 项目的谷歌地图。
由于该项目相当大，加载时间比我想要的要长。因此，我试图让加载页面的 UI 变得更好，目前它相当平淡。我的目标是在此页面中实现一个简单的谷歌地图 API，该 API 不需要很长时间即可呈现，并且仅读取一定数量的变量，例如纬度、经度、缩放级别和最大缩放。
我还想异步加载 map 以提高性能。
我已将脚本放在下面一个单独的 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>
最佳答案
您的代码中存在三个错误:
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 - 我的 JavaScript 代码没有渲染我的谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38183719/