使用 JavaScript API 搜索答案

【问题标题】：Search using JavaScript API使用 JavaScript API 搜索
【发布时间】：2021-12-08 19:17:32
【问题描述】：

我正在为“搜索”小部件编写代码，以简化在地图上查找位置的过程。我要做的就是输入该区域、地点或任何道路的位置，它会带我到那个地方。

但我的代码似乎有一些问题，显示屏幕空白：

<!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",
        "dojo/domReady!"

      ], function (Map) {
         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>

【问题讨论】：

您是否检查了您的 devtools 控制台中的错误？

标签： javascript arcgis arcgis-js-api arcgis-server

【解决方案1】：

您只是缺少 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",
            "dojo/domReady!"
        ], function (Map, 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>

我建议您使用新版本的 API。

【讨论】：