Question

在我开始使用Laravel之前，我一直在为商店定位器使用此脚本，通常它一直都在工作，但是不幸的是，当我开始在Laravel中使用它时，地图未显示，容器仅显示信息窗口。

当我已经插入Google api密钥时，我发现我的google iframe是未定义的。有谁知道它是怎么发生的？困扰了我几个小时。

https://www.bjornblog.com/web/jquery-store-locator-plugin

Google API检查器显示api正在运行，但地图未显示

按照我的项目的源代码

Footer.blade.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="{{ asset('js/libs/handlebars.min.js') }}"></script>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyDlkvi61_Xxxxxxxxxxxxxxxxxxx"></script>

<script src="{{ asset('js/plugins/storeLocator/jquery.storelocator.js') }}"></script>

调用脚本：

<script>
$(document).ready(function () {
    $('#bh-sl-map-container').storeLocator({
        'slideMap': false,
        'fullMapStart': true,
        'disableAlphaMarkers': true,
        'storeLimit': -1,
        'dataType': 'json',
        'dataLocation': '{{ asset("js/plugins/storeLocator/templates/data/data.json") }}',
        'nameSearch': true,
        'infowindowTemplatePath': '{{ asset("js/plugins/storeLocator/templates/infowindow-description.html") }}',
        'listTemplatePath': '{{ asset("js/plugins/storeLocator/templates/location-list-description.html") }}',
        'KMLinfowindowTemplatePath': '{{ asset("js/plugins/storeLocator/templates/kml-infowindow-description.html") }}',
        'KMLlistTemplatePath': '{{ asset("js/plugins/storeLocator/templates/kml-location-list-description.html") }}',
        'lengthUnit': 'km',
        'distanceAlert': -1,
        'mapSettings': {
            zoom: 8,
            scrollwheel: true,
        },
        infoBubble: {
            backgroundClassName: 'bh-sl-window',
            backgroundColor: '#fff',
            borderRadius: 30,
            borderWidth: 0,
            closeSrc: '{{ asset("js/assets/img/close-icon-dark.png") }}',
            disableAutoPan: false,
            shadowStyle: 1,
            padding: 20,
            maxWidth: 200,
            arrowSize: 10,
        }
    });
});
</script>

storelocator.blade.php：

<div class="outlet-map">
        <div id="bh-sl-map-container" class="bh-sl-map-container">
                <div id="bh-sl-map" class="bh-sl-map"></div>
                <div class="bh-sl-loc-list">
                  <ul class="list"></ul>
                </div>
              </div>
</div>

希望有人可以帮助我：（

Laravel与Bjorn jQuery商店定位器

0 个答案: