googlemaps/v3-utility-library: ReferenceError: InfoBox не определен

avatar
LearningPath
7 апреля 2018 в 23:00
952
1
-1

Кто-нибудь может помочь?

Я использую Laravel 5.5. Я успешно реализовал API Карт Google в своем проекте (отображение InfoWindow с данными). Чтобы настроить infoWindow, я использую локально через скрипт infobox.js, загруженный по ссылке github https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox. js, но каждая попытка отобразить InfoBox терпит неудачу. После многих часов копания в коде я обнаружил, что мой код не работает по адресу

.
var ib = new InfoBox(myOptions);

Чтобы подтвердить, что это не связано с кодом моего проекта, я открыл страницу с копией и вставкой основного примера github по адресу https://github.com/googlemaps/v3-utility-library/blob/master. /infobox/examples/infobox-basic.html: Но все равно та же ошибка:

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>

Мне интересно, может ли быть причиной установка микса (для .js, .css и т. д.) в моем Laravel Framework? Кто-нибудь сталкивался с такой проблемой? ... Я открыл задачу на https://github.com/googlemaps/v3-utility-library/issues/423

Обновление------ Вот мой файл Mix:

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();
Источник
Ben
7 апреля 2018 в 23:41
1

где сохранено infobox.js? /public/js/infobox.js?

LearningPath
8 апреля 2018 в 11:26
0

@Ben В Laravel он находится в ressource/assets/js и скомпилирован LaravelMix в public/js/, как и другие jsFiles ... я почти уверен, что файл загружен, так как я добавил журнал обратного вызова onload() для проверки. Код выполняется до этой строки var ib = new InfoBox(myOptions); (что подтверждается и сообщением FireBug в браузере)

LearningPath
8 апреля 2018 в 11:31
0

Результат с текущим кодом: карта отображается с маркером на моей странице, но при нажатии на нее не появляется информационное поле (IE/Chrome/FireFox) PS: я до сих пор не понимаю, как работает SO; почему мой вопрос был отклонен (некоторые знания стоят больше или меньше других tts)?

Ben
8 апреля 2018 в 17:05
0

как вы компилируете? Можете ли вы обновить свой вопрос, включив в него файл микширования/или где-то еще вы включаете infobox.js?

LearningPath
8 апреля 2018 в 19:20
0

@ben: я обновил свой вопрос с помощью файла микса. (P.S: с sourceMaps() или без него, если вы спросите, все та же проблема). спасибо

LearningPath
8 апреля 2018 в 20:13
0

Я протестировал 3-й найденный URL-адрес infobox.js (включая предыдущую версию) cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/…, а теперь образец и моя проектная работа. Знаете ли вы URL-адрес CDN для текущей версии infoBox.js для тестирования? Однако при копировании кода рабочего URL-адреса в мой локальный infobox.js я сталкиваюсь с той же ошибкой. Итак, что-то происходит с моим файлом laravel infoBox.js, скомпилированным из Resources to Public...

Ответы (1)

avatar
Ben
8 апреля 2018 в 20:37
2

Для Maravel Mix, mix.js() Использование WebPack Для соединения такого как Commonjs Модули AMD Модули.

Включенный вами файл infobox.js не является модулем javascript, поэтому невозможно использовать веб-пакет для объединения ресурсов.

Вместо этого следует использовать mix.scripts() для объединения простых js:

mix.scripts([
    'resources/assets/js/infobox.js'
], 'public/js/infobox.js');
LearningPath
11 апреля 2018 в 09:14
0

Я отметил ваш ответ как правильный, поскольку он работает, но не могли бы вы дать еще несколько пояснений: я написал простой файл javascript, который работает с mix.js() или с mix.scripts(). Можете ли вы объяснить, в чем разница с неработающим infoBox.js? Какие другие активы поставляются с этим infoBox.js?

Ben
11 апреля 2018 в 09:29
0

проверьте это (webpack.github.io) webpack является сборщиком модулей, и javascript должен быть написан в модуле, таком как CommonJS (spec: github.com/webpack/docs/wiki/commonjs ) или AMD (спецификация: github.com/webpack/docs/wiki/amd), а простой js невозможно использовать напрямую с webpack.

LearningPath
11 апреля 2018 в 10:08
0

Понятно. Спасибо.