了解如何使用搜索微件和地理编码服务查找地址或地点。
地理编码是将地址或地点文本转换为位置的过程。地理编码服务可以搜索地址或地点并执行反向地理编码。使用 Search 微件访问地理编码服务并执行交互式搜索。
在本教程中，您将使用 Search微件来搜索地址和位置。
步骤
创建新 Pen
- 要开始使用，请完成显示地图教程 或 使用此 Pen。
添加模块
在 require 语句中，添加 Search 模块。
GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。
添加行。更改行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
require([
"geoscene/config",
"geoscene/Map",
"geoscene/views/MapView",
"geoscene/widgets/Search"
], function(geosceneConfig, Map, MapView, Search) {
Search微件是一个可见控件，允许您以交互方式搜索地址和地点。它会在您键入时提供建议，并允许您选择结果。当您选择结果时，它将缩放到该位置并显示一个具有地址信息的弹出窗口。默认情况下，微件使用 locator 和 source 以访问地理编码服务。
创建 Search微件。将 view 属性设置为 view。
添加行。添加行。添加行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const view = new MapView({
container: "viewDiv",
map: map,
center: [115,38],
zoom: 4
});
const search = new Search({ //Add Search widget
view: view
});
将微件添加至视图的右上角。在 DefaultUI 中了解有关将 UI 组件添加到 view 的更多信息。
添加行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const search = new Search({ //Add Search widget
view: view
});
view.ui.add(search, "top-right"); //Add to the map
运行应用程序
在 CodePen 中，运行代码以显示地图。
地图应显示 Search微件并允许您以交互方式搜索地址和地点。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：