javascript - 使用 JavaScript API 搜索
问题描述
我正在为“搜索”小部件编写代码,以简化在地图上查找位置的过程。所有,我想做的就是输入区域、地点或任何道路的位置,它会带我到那个地方。
但是我的代码似乎有一些问题并且显示屏幕空白:
<!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>
解决方案
您只是缺少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。
推荐阅读
- python - Python中如何将YOLO格式注解转换为x1,y1,x2,y2坐标?
- python - SikuliLibrary 图像识别功能在 Windows 上不起作用
- node.js - Visual Studio 构建 njsproj Node.js 项目,即使自上次构建以来没有任何更改
- javascript - RxJs:当全部取消订阅时,中止延迟和共享的 observable
- javascript - 让引导程序使用 gridstack 小部件大小来调整大小?
- c# - 当输入记录数 > 1000 条记录时有效调用 GetByIds(MS Graph API 方法)
- azure - 从数据存储区加载 Azure ML 试验运行信息
- java - 如何更改/刷新 maven project.basedir 属性?
- data-visualization - 3D数据网络可视化
- python - 如何验证用户是否年满 13 岁?