You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用ArcGIS JavaScript API开发地图Search控件时页面空白问题求助

问题原因

你代码运行空白的核心原因是缺少Search控件对应的依赖模块引入,未加载模块直接调用构造函数会触发JS运行报错,阻止页面渲染。具体修复方案如下:

修复步骤
  • 第一步:在require的依赖数组中新增"esri/dijit/Search"依赖
  • 第二步:在require的回调函数参数中,对应新增Search参数,保证依赖和参数顺序一一对应
修复后完整代码
<!DOCTYPE html>
<html dir="ltr">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

   <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/dijit/calcite.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/esri/esri.css">
   <style>
      html,
      body,
      #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
   </style>
   <script src="https://js.arcgis.com/3.38/"></script>
   <script>
      require([
        "esri/map",
        "esri/dijit/Search", // 新增Search模块引入
        "dojo/domReady!"
      ], function (Map, Search) { // 回调函数新增对应Search参数
         var map = new Map("map", {
            basemap: "gray-vector",
            center: [-120.435, 46.159], // lon, lat
            zoom: 6
         });

         var search = new Search({
            map: map
         }, "search");
         search.startup();

      });
   </script>
</head>

<body class="calcite">
   <div id="search"></div>
   <div id="map"></div>
</body>

</html>
功能验证

修复后页面可正常加载灰度矢量底图,左上角搜索框输入地点名称即可触发定位,匹配结果会自动定位到地图对应区域。

内容的提问来源于stack exchange,提问作者user17165527

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 08:45:03