googlemaps/v3-utility-library : ReferenceError: InfoBox is not defined
googlemaps/v3-utility-library : ReferenceError: InfoBox is not defined
有人可以提供帮助吗?
我正在使用 Laravel 5.5。我在我的项目中成功实施了 Google 个 Maps API(显示数据的 InfoWindows)。为了自定义信息窗口,我通过脚本在本地使用从 github link https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js 下载的 infobox.js
但每次尝试显示信息框都失败了。
几个小时后,深入研究代码,我发现我的代码在
失败
var ib = new InfoBox(myOptions);
为了确认它与我的项目代码无关,我在 https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html 处复制粘贴了 github 的基本示例的页面:
但仍然有同样的错误:
ReferenceError: InfoBox is not defined
Firebug 再次关联到:var ib = new InfoBox(myOptions);
如果您怀疑这是我呈现错误的代码副本:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&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 框架上的混合设置(对于 .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();
对于 Laravel 混合,mix.js()
使用 Webpack to bundle such as CommonJS or AMD 个模块。
对于您包含的 infobox.js,它不是 javascript 模块,因此无法使用 webpack 捆绑资产。
相反,您应该使用 mix.scripts()
来组合纯 js:
mix.scripts([
'resources/assets/js/infobox.js'
], 'public/js/infobox.js');
有人可以提供帮助吗?
我正在使用 Laravel 5.5。我在我的项目中成功实施了 Google 个 Maps API(显示数据的 InfoWindows)。为了自定义信息窗口,我通过脚本在本地使用从 github link https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js 下载的 infobox.js
但每次尝试显示信息框都失败了。
几个小时后,深入研究代码,我发现我的代码在
var ib = new InfoBox(myOptions);
为了确认它与我的项目代码无关,我在 https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html 处复制粘贴了 github 的基本示例的页面: 但仍然有同样的错误:
ReferenceError: InfoBox is not defined
Firebug 再次关联到:var ib = new InfoBox(myOptions);
如果您怀疑这是我呈现错误的代码副本:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&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 框架上的混合设置(对于 .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();
对于 Laravel 混合,mix.js()
使用 Webpack to bundle such as CommonJS or AMD 个模块。
对于您包含的 infobox.js,它不是 javascript 模块,因此无法使用 webpack 捆绑资产。
相反,您应该使用 mix.scripts()
来组合纯 js:
mix.scripts([
'resources/assets/js/infobox.js'
], 'public/js/infobox.js');