代码之家  ›  专栏  ›  技术社区  ›  LearningPath

googlemaps/v3实用程序库:引用错误:未定义InfoBox

  •  -1
  • LearningPath  · 技术社区  · 6 年前

    有人能提供一些帮助吗?

    我使用的是Laravel 5.5。我在我的项目中成功地实现了Google Maps API(InfoWindows显示数据)。为了定制infoWindow,我通过脚本在本地使用 infobox.js 从github链接下载 https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js 但每次显示信息框的尝试都会失败。 几个小时后,在代码中挖掘,我发现我的代码在

    var ib = new InfoBox(myOptions);
    

    为了确认它与我的项目代码无关,我在 https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html : 但仍然有相同的错误:

    ReferenceError:未定义信息框

    哪个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>
    

    我想知道mix的设置(对于.js、css等)在我的Laravel框架上可能是原因?有人遇到过这样的问题吗? 。。。我在上打开了一个问题 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();
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Ben    6 年前

    对于Laravel混合物, mix.js() 使用 Webpack 捆绑,如 CommonJS AMD 模块。

    用于信息框。您包含的js,它不是javascript模块,因此不可能使用webpack捆绑资产。

    相反,您应该使用 mix.scripts() 要组合普通js:

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