使用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
相关产品推荐
相关产品推荐

