gpt4 book ai didi

javascript - 包含 Google Maps API JS V3 但无法正常工作

转载 作者:行者123 更新时间:2023-11-28 15:25:09 25 4
gpt4 key购买 nike

我在我的 Laravel 应用程序中包含了可以使用的 GOOGLE MAPS V3 API。我将脚本放入 HTML 文档的标题中,如下所示:

<head>
<!-- Store Meta information -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="{{ asset('/css/main.css') }}" rel="stylesheet">

<!-- Import Scripts -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ Config::get('customconfig.googleMapsApiKey')}}"></script>
<title>MEDIFAKTOR</title>
</head>

Blade 模板中结束 BODY 标记之前的自定义 JS 文件如下所示:

<!DOCTYPE html>
<html lang="en">
<!-- Head Data -->
@include('includes.head')
<body>
<!-- Header -->
<header class="main-header">
<a class="logo" href=""><b>MEDIFAKTOR</b>server</a>
@include('includes/navBar')
</header>

<!-- Body -->
<div class="pageContainer">
<!-- Sidebar -->
<div class="pageSidebarWrapper">
@include('includes.sidebar')
</div>
<!-- Content -->
<div class="pageContentWrapper">
<div class="pageContent">
<div class="mapcanvas"></div>
@include('includes.content')
</div>
</div>
</div>
<script type="text/javascript" src="js/googleMaps.js"></script>
</body>
</html>

googleMaps.js

var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('mapcanvas'),
mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

当我加载页面时,我收到错误消息:

Uncaught TypeError: Cannot read property 'offsetWidth' of null

据我所知,当页面未完全加载或我在 JS 脚本中搜索的 div 容器类不存在时,通常会发生这种情况。我认为我可以将两者排除作为一种选择。但仍然出现错误。

Laravel 中是否有特殊的文件加载顺序会影响 Blade 模板中包含文件的加载?或者我错过了什么?

谢谢,

塞巴斯蒂安

最佳答案

在您的代码中没有任何元素 id="mapcanvas"在你的 html 代码中更改

<div class="mapcanvas"></div>

更改为

<div id="mapcanvas"></div>

你有css来设置ma​​pcanvas的高度和宽度

#mapcanvas{
height: 400px;
witdh: 500px;

}

关于javascript - 包含 Google Maps API JS V3 但无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29330174/

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