搜索地址
了解如何使用搜索微件和地理编码服务查找地址或地点。
地理编码是将地址或地点文本转换为位置的过程。地理编码服务可以搜索地址或地点并执行反向地理编码。使用 Search 微件访问地理编码服务并执行交互式搜索。
在本教程中，您将使用 Search 微件搜索地址和位置。
步骤
创建新 Pen
添加模块
在
require语句中，添加Search模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Change line 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 搜索地址</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Search" ], function(geosceneConfig,Map, MapView, Search) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [155,38], zoom: 4 }); const search = new Search({ //Add Search widget view: view }); view.ui.add(search, "top-right"); //Add to the map }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
添加搜索微件
Search 微件是一个可见控件，允许您以交互方式搜索地址和地点。它会在您键入时提供建议，并允许您选择结果。当您选择结果时，它将缩放到该位置并显示一个具有地址信息的弹出窗口。默认情况下，微件使用 locator 和 source 以访问地理编码服务。
创建
Search微件。将view属性设置为view。Add line. Add line. Add line. 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 搜索地址</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Search" ], function(geosceneConfig,Map, MapView, Search) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [115,38], zoom: 4 }); const search = new Search({ //添加搜索微件 view: view }); view.ui.add(search, "top-right"); //Add to the map }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>将微件添加至视图的右上角。在 DefaultUI 中了解有关将 UI 组件添加到
view的更多信息。Add line. 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<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 搜索地址</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/widgets/Search" ], function(geosceneConfig,Map, MapView, Search) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [115,38], zoom: 4 }); const search = new Search({ //添加搜索微件 view: view }); view.ui.add(search, "top-right"); //添加至地图 }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
地图应显示 Search 微件并允许您以交互方式搜索地址和地点。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟