了解如何使用搜索微件和地理编码服务查找地址或地点。
地理编码是将地址或地点文本转换为位置的过程。地理编码服务可以搜索地址或地点并执行反向地理编码。我们通过 Search 微件访问地理编码服务并执行交互式搜索。
在本教程中，我们展示如何使用 Search 微件来搜索地址和位置。
步骤
创建新 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: [116.3,39.9],
zoom: 6
});
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 功能，请参阅以下教程：