完全被“UncaughtReferenceError: X not defined at function”难住了答案

【问题标题】：Stumped completely by "UncaughtReferenceError: X not defined at function"完全被“UncaughtReferenceError: X not defined at function”难住了
【发布时间】：2018-04-20 11:41:58
【问题描述】：

我正在尝试构建一个谷歌地图，该地图使用他们的 api 从融合表中获取数据并将其显示在地图上。我现在有数据显示在地图上。

我想要一个按钮来打开/关闭数据，在广泛搜索之后，我尝试实施我找到的解决方案。我的代码设置几乎完全相同，但仍然无法切换数据。

我认为我的范围有问题，因为每当我单击按钮时，它都会在 Javascript Dev Console 中出现“未捕获的 ReferenceError: view1 is not defined”错误。

我也用谷歌搜索过，起初我认为函数“toggleView1”没有全局定义，所以我改变了它，但它仍然不起作用......任何建议将不胜感激，我不知所措在此刻。

 <!DOCTYPE html>
<html>
  <head>
    <title>WorkingMapTiles</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script src="https://maps.google.com/maps/api/js?key=XXXAPIKEYXX">.   </script>
    <script>



  var view1 = new google.maps.FusionTablesLayer({
    query: {
      select: '\'LatitudeLongitude\'',
      from: 'XXXfusionTableIdXXX'
    }
  });

  function init() {
    var mapBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(45.000, -65.000),
        new google.maps.LatLng(46.000, -64.000));
    var mapMinZoom = 14;
    var mapMaxZoom = 17;

    var map = new google.maps.Map(document.getElementById("map"));
    map.fitBounds(mapBounds);


    view1.setMap(map);
  }



  ////FUNCTION NOT GETTING TRIGGERED BY BUTTONS
  function toggleView1() { 
    if(view1.map) {
      view1.setOptions({map: null});
    } else {
      view1.setOptions({map: map});
    }
  }
    </script>
<style>
  html, body, #map { width:100%; height:100%; margin:0; padding:0; }
  #floating-panel { position: absolute; top: 10px; left: 25%;}
</style>
</head>

<body onload="init()">
  <div id="map"></div>
  <div id="floating-panel">
    <input type="button" value="Toggle view1" onclick="toggleView1();">. </input>
  </div>
</body>
</html>

【问题讨论】：

view1 只存在于init()
编辑后的版本也不行 -> Variable shadowing
好的，现在这个编辑版本没有可变阴影。地图正常加载，上面显示的数据。现在，我单击按钮，数据消失了。耶。但是当我再次单击它时，数据不会再次出现。它给出了“InvalidValueError: setMap: not an js?key=XXXAPIKeyXXX:40 instance of map”错误
通过消除问题不断改变你的问题并不是 SO 的工作方式......
好的，如果需要，我会将其更改为已解决并创建一个新线程。谢谢安德烈亚斯！

标签： javascript google-maps-api-3 scope google-fusion-tables

【解决方案1】：

原来：

function init() {
  var mapBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(45.000, -65.000),
      new google.maps.LatLng(46.000, -64.000));
  var mapMinZoom = 14;
  var mapMaxZoom = 17;

  var map = new google.maps.Map(document.getElementById("map"));
  map.fitBounds(mapBounds);

  var view1 = new google.maps.FusionTablesLayer({
    query: {
      from: 'XXXfusionTableIdXXX'
    }
  });

  view1.setMap(map);
}

视图之一在 init() 的范围内，因为这是定义的地方。将 view1 的变量定义带出 init() 的范围。请注意，您可能在 init() 的范围内没有 view1 的另一个定义，否则会有 variable shadowing

【讨论】：