搜索完后在地图上显示不出来，显示白屏

来源：4-2 地图搜索（2）

unbreakable_全栈

2020-12-23 22:49:21

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图
# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!doctype html>
<html>

<head>
   <meta charset="utf-8">
   <title></title>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e">
   </script>
   <style type="text/css">
      * {
         margin: 0;
         padding: 0;
         list-style: none;
      }

      #container {
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
      }

      #setZoomNode,
      #setCenterNode {
         width: 200px;
         height: 500px;
         position: absolute;
         z-index: 99;
         right: 20px;
         top: 20px;
         border: 1px solid black;
         box-shadow: 0 0 5px black;
         background: white;
      }

      #setCenterNode {
         top: 20px;
      }

      #node li {
         cursor: pointer;
      }
   </style>
</head>

<body>
   <div id="container"></div>
   <div id='setCenterNode'>
      <input type="" name="" id='searchText'>
      <ul id='node'></ul>
   </div>

   <script type="text/javascript">
      var map = new AMap.Map('container', {
         zoom: 11, //初始的地图级别
         center: [100.379391, 30.861536] //初始化地图的中心点
      });

      //加载插件、 Autocomplete 地图加载完毕会触发的回调函数
      AMap.plugin('AMap.Autocomplete', function () {
         //   console.log(1);
         // node.innerHTML = ''
         // if (this.value === '') return
         //   oninput  当内容改变的时候触发的一个函数
         searchText.oninput = function () {
            // console.log(this.value)
            node.innerHTML = ''
            if (this.value == '') return
            new AMap.Autocomplete().search(this.value, function (status, data) {
               console.log(data, 'sss')
               // location是空时，就无法获取到location了，因此可以判断一下，如果该数据没有location属性，就不生成li标签了，我们只让属性齐全的数据对应生成li元素
               for (var i = 0; i < data.tips.length; i++) {
                  var oLi = document.createElement('li')
                  oLi.innerHTML = data.tips[i].name
                  oLi.Q = data.tips[i].location.Q
                  oLi.R = data.tips[i].location.R
                  node.appendChild(oLi)
                  oLi.onclick = function () {
                     console.log(this.Q, this.R)
                     map.setCenter([this.Q, this.R])
                  }
               }
               // TODO 搜索完后在地图上显示不出来，显示白屏
            })
         }

         // searchText.oninput = function(){
         //    // console.log();
         //     node.innerHTML = '';
         //     if(this.value == ''){
         //        return;
         //     }

         //     new AMap.Autocomplete().search(this.value,function(status,data){
         //         console.log(data.tips);

         //         for(var i = 0;i < data.tips.length;i++){
         //             var oLi = document.createElement('li');
         //             oLi.innerHTML = data.tips[i].name;
         //             oLi.P = data.tips[i].location.P;
         //             oLi.R = data.tips[i].location.R;
         //             node.appendChild(oLi);
         //             oLi.onclick = function(){
         //                // console.log(this.P,this.R)
         //                map.setCenter([this.R,this.P]);
         //             };
         //         }
         //     });
         // };

      });
   </script>
</body>

</html>