Question

有人能提供一些帮助吗？

我正在使用Laravel 5.5。我在项目中成功实施了Google Maps API（InfoWindows显示数据）。为了自定义infoWindow，我通过脚本本地使用从github链接https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js下载的infobox.js但是每次显示InfoBox的尝试都失败了。经过几个小时，挖掘代码，我发现我的代码在

失败了

var ib = new InfoBox(myOptions);

要确认它与我的项目代码无关，我在https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html实现了一个带有github基本示例复制粘贴的页面：但仍然有同样的错误：

ReferenceError：未定义InfoBox

哪个Firebug再次与var ib = new InfoBox(myOptions);

相关

如果您怀疑这是我的代码副本呈现错误：

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="/js/infobox.js"></script>
<script type="text/javascript">
    function initialize() {
        ele = document.getElementById("test");

        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
        var myMapOptions = {
             zoom: 15
            ,center: secheltLoc
            ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
        var marker = new google.maps.Marker({
            map: theMap,
            draggable: true,
            position: new google.maps.LatLng(49.47216, -123.76307),
            visible: true
        });
        ele.textContent="initMap2";
        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
        var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: {
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };
        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(theMap, this);
        });
        ele.textContent="initMap33";
        var ib = new InfoBox(myOptions);
        ele.textContent="initMap44";
        ib.open(theMap, marker);
    }
</script>

<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
    <div id="test">testee</div>
    <div id="map_canvas" style="width: 100%; height: 400px"></div>
    <p>
    This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>

</html>

我想知道我的Laravel框架上的mix（对于.js，.css等......）的设置是否有原因？有人遇到过这样的问题吗？ ......我在https://github.com/googlemaps/v3-utility-library/issues/423

上打开了一个问题

更新------ 以下是我的混合文件：

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/slider.js', 'public/js')
   .js('resources/assets/js/globalstat.js', 'public/js')
   .js('resources/assets/js/infobox.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css').sourceMaps();

Answer 1

对于Laravel Mix，mix.js()使用Webpack捆绑CommonJS或AMD模块。

对于你所包含的infobox.js，它不是一个javascript模块，因此不可能使用webpack捆绑资产。

相反，您应该使用mix.scripts()来组合普通的js：

mix.scripts([
    'resources/assets/js/infobox.js'
], 'public/js/infobox.js');

googlemaps / v3-utility-library：ReferenceError：未定义InfoBox

1 个答案: