gpt4 book ai didi

javascript - 我的 JavaScript 代码没有渲染我的谷歌地图

转载 作者:行者123 更新时间:2023-12-03 06:36:21 26 4
gpt4 key购买 nike

我目前正在尝试加载基于相当大的 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com