全局变量'map'未定义 [英] global variable 'map' is undefined
问题描述
我有一个全局变量map，在开始脚本标记之后声明 - 我也有一个全局变量test_var，在右下方声明。在初始化函数中，我使用谷歌地图API创建一个新的谷歌地图，并将其分配给全局变量地图。在函数之外，我初始化映射并尝试console.log（map）和console.log（test_var）。前者返回未定义，后者返回42，但它们都是全局变量，所以我不明白为什么映射在初始化函数中赋值之后，调用该初始化函数现在具有未定义的值。还有一件事：在控制台中，如果我尝试访问地图或像map.getBounds（）这样的地图方法，它可以正常工作。问题是，为什么不能以编程方式执行此操作，而不仅仅是在控制台窗口中。谢谢
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Heatmaps< / title>
< style>
//......有些造型..... //
< / style>
< body>
/....some html .... /
< / body>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization>< / script> ;
< script>
var map;
test_var = 42;
var home = new google.maps.LatLng（50，-15）//地图位于大西洋的某个地方，稍后改变
函数initialize（）{
var mapOptions = {
zoom：3，
center：home，
mapTypeId：google.maps.MapTypeId.ROADMAP，
disableDefaultUI：true，
panControl ：false，
zoomControl：true，
mapTypeControl：false，
scaleControl：false，
streetViewControl：false，
overviewMapControl：false
};
var styles = [
{
stylers：[
{gamma：0.83}，
{hue：＃00ffe6}，
{饱和度：-20}
]
}，{
featureType：道路，
elementType：几何，
stylers：[
{lightness：100}，
{visibility：simplified}
]
}，{
featureType：road，
elementType：labels ，
stylers：[
{visibility：off}
]
}
];
map = new google.maps.Map（document.getElementById（'map-canvas'），
mapOptions）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
console.log（test_var）; //这个工程！
console.log（map）; //获取未定义的错误，为什么？
< / script>
< / head>
< / html>
这是因为您的事件处理程序（函数<$ c当您调用 console.log（map）时，尚未调用$ c> initialize ）。尝试添加 console.log（map）到一个按钮
< input type = button onclick =console.log（map）value =Test map/>
I have a global variable, map, declared after the opening script tag - I also have a global variable, test_var, declared right underneath. In the initialize function, I use the google maps api to create a new google map and assign it to the global variable map. Outside of the function, I initialize the map and attempt to console.log(map) and console.log(test_var). The former returns undefined and the latter returns 42, but they are both global variables, so I don't understand why the map, after assigning it a value in the initialize function, then calling that initialize function now has an undefined value.
One more thing: in the console if I try to access map, or a map method like map.getBounds(), it works fine. The question is, why cant I do this programmatically and not just in the console window. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
//.......some styling.....//
</style>
<body>
/....some html..../
</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
var map;
test_var = 42;
var home = new google.maps.LatLng(50, -15) //map is centered somewhere in the atlantic ocean, change later
function initialize() {
var mapOptions = {
zoom: 3,
center: home,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
var styles = [
{
stylers: [
{ "gamma": 0.83 },
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
console.log(test_var); //this works!
console.log(map); //get undefined error, why?????
</script>
</head>
</html>
This is because your event handler (function initialize) is not yet called when you call console.log(map). Try adding console.log(map) to a button
<input type=button onclick="console.log(map)" value="Test map" />
这篇关于全局变量'map'未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
