查找地点

了解如何使用地理编码服务搜索地名、POI 和地理位置。

地点查找是搜索地名或 POI 以查找其地址和位置的过程。可以使用地理编码服务在任何地理位置附近查找咖啡馆、加油站或餐馆等。也可按名称或使用类别搜索地点。可在某个位置附近搜索，也可进行全局搜索。

在本教程中，您将使用 locator 访问地理编码服务并按地点类别查找地点。弹出窗口用于显示地名和地址。

步骤 ​

创建新 Pen ​

1. 开始前，请完成显示地图教程。

添加模块 ​

1. 在 require 语句中，添加 locator 和 Graphic 模块。

   更多内容

   GeoScene Maps SDK for JavaScript 提供有 AMD 模块和 ES 模块，但本教程基于 AMD。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

   require([
       "geoscene/config",
       "geoscene/Map",
       "geoscene/views/MapView",
       "geoscene/rest/locator",
       "geoscene/Graphic",
       "geoscene/core/reactiveUtils"
   ], (geosceneConfig, Map, MapView, locator, Graphic, reactiveUtils) => {

   1
   2
   3
   4
   5
   6
   7
   8
   

创建地点类别选择器 ​

创建一个过滤组件，可以按照位置和类别来过滤地点搜索结果。比如按照类别对地点进行过滤，如咖啡店、加油站和酒店等。使用 HTML select 元素提供几个可供选择的类别列表。

1. 创建一个类别数组 places。

   js

       const view = new MapView({
           container: "viewDiv",
           map: map,
           center: [18.9553, 69.6492], //Longitude, latitude
           zoom: 13
       });
   
       const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"];

   1
   2
   3
   4
   5
   6
   7
   8
   

2. 为搜索类别创建父元素 select 并定义样式。

   js

       const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"];
   
       const select = document.createElement("select");
       select.setAttribute("class", "geoscene-widget geoscene-select");
       select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em");

   1
   2
   3
   4
   5
   

3. 为每个类别创建 option 元素，并将其添加到 select 元素中。

   js

       const select = document.createElement("select");
       select.setAttribute("class", "geoscene-widget geoscene-select");
       select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em");
   
       places.forEach((p) => {
           const option = document.createElement("option");
           option.value = p;
           option.innerHTML = p;
           select.appendChild(option);
       });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

4. 将 select 元素添加到视图的 top-right 处。

   js

       places.forEach((p) => {
           const option = document.createElement("option");
           option.value = p;
           option.innerHTML = p;
           select.appendChild(option);
       });
   
       view.ui.add(select, "top-right");

   1
   2
   3
   4
   5
   6
   7
   8
   

定义服务 url ​

使用 locator 访问地理编码服务。

1. 定义一个变量 locatorUrl，设置地理编码服务 URL 。

   js

   
       view.ui.add(select, "top-right");
   
       const locatorUrl = "https://www.geosceneonline.cn/server/rest/services/Utilities/GeocodingTools/GPServer";

   1
   2
   3
   4
   

搜索地点 ​

查找地点，可以使用 locator addressToLocations 功能。选择类别，向地理编码服务发送请求，服务则返回带有名称、地址和位置信息的候选地点。使用该函数执行搜索，并将结果作为图形添加到地图中。

1. 创建 findPlaces 函数并调用 addressToLocations。设置 location、categories 和 outFields 属性。

   js

       const locatorUrl = "https://www.geosceneonline.cn/server/rest/services/Utilities/GeocodingTools/GPServer";
   
       // Find places and add them to the map
       function findPlaces(category, pt) {
           locator.addressToLocations(locatorUrl, {
               location: pt,
               categories: [category],
               maxLocations: 25,
               outFields: ["Place_addr", "PlaceName"]
           })
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

2. 清除现有弹出窗口和图形的视图。

   js

   // Find places and add them to the map
       function findPlaces(category, pt) {
           locator.addressToLocations(locatorUrl, {
               location: pt,
               categories: [category],
               maxLocations: 25,
               outFields: ["Place_addr", "PlaceName"]
           })
   
           .then((results) => {
               view.closePopup();
               view.graphics.removeAll();
           });
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   

3. 为返回的每个结果创建一个 Graphic。为每个图形设置 attributes、geometry、symbol 和 popupTemplate 属性。将每个图形添加到 view 中。

   js

           .then((results) => {
               view.closePopup();
               view.graphics.removeAll();
   
               results.forEach((result) => {
                   view.graphics.add(
                   new Graphic({
                       attributes: result.attributes, // Data attributes returned
                       geometry: result.location, // Point returned
                       symbol: {
                           type: "simple-marker",
                           color: "#000000",
                           size: "12px",
                           outline: {
                               color: "#ffffff",
                               width: "2px"
                           }
                       },
   
                       popupTemplate: {
                           title: "{PlaceName}", // Data attribute names
                           content: "{Place_addr}"
                       }
                   })
               );
           });
       });

   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
   

4. 当加载视图时，以及每次视图更改后，都将调用 findPlaces 函数。

   js

                       popupTemplate: {
                           title: "{PlaceName}", // Data attribute names
                           content: "{Place_addr}"
                       }
                   })
               );
           });
   
       });
   
   }
   
   // Search for places in center of map
   reactiveUtils.when(
       () => view.stationary,
       () => {
           findPlaces(select.value, view.center);
       }
   );

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

5. 公园位置应显示在地图上。通过拖动地图，可以看到视图中填充的新位置。

增加选择类别事件处理 ​

当类别更改时，使用事件处理程序调用 findPlaces 函数。

1. 添加事件监听器以监听类别更改。

   js

   // Search for places in center of map
   reactiveUtils.when(
       () => view.stationary,
       () => {
           findPlaces(select.value, view.center);
       }
   );
   
   // Listen for category changes and find places
   select.addEventListener("change", (event) => {
       findPlaces(event.target.value, view.center);
   });

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

运行应用程序 ​

在 CodePen 中，运行代码以显示地图。

选择类别时，我们会看到所选类别的位置显示在地图的中心。当加载地图以及地图视图位置通过缩放或平移发生变化时，则会进行搜索。可以单击图形以显示带有各位置的名称和地址信息的弹出窗口。

下一步是什么？ ​

要了解如何使用其他API 功能，请参阅以下教程：

• 搜索地址

• 查找路径和方向