Question

我在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>

在刀片模板中关闭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中是否有特殊的文件加载顺序会影响刀片模板中包含文件的加载？或者我错过了其他什么？

谢谢，

塞巴斯蒂安

Answer 1

您的代码中的

没有任何元素id =“mapcanvas” 在您的HTML代码更改

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

更改为

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

你有 css 来设置高度和宽度 mapcanvas

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

}

谷歌地图API JS V3包括但不起作用

1 个答案: