查找地点
了解如何使用地理编码服务搜索企业、POI 和地理位置。
地点查找是搜索地名或 POI 以查找其地址和位置的过程。您可以使用地理编码服务为世界各地的任何地理位置查找咖啡馆、加油站或餐馆等地方。您可以按名称或使用类别搜索地点。您可以在某个位置附近进行搜索，也可以执行全局搜索。
在本教程中，您将使用 locator 访问地理编码服务并按地点类别查找地点。弹出窗口用于显示地名和地址。
步骤
创建新 Pen
添加模块
在
require语句中，添加locator和Graphic模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
创建地点类别选择器
您可以通过提供地点类别来过滤地点搜索结果。地点可以按分类 (如，咖啡馆、加油站、酒店) 进行过滤。使用 HTML select 元素可提供几个类别的列表以供进行选择.
为将用于进行选择的类别创建一个
places数组。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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //经度、纬度 zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建父
select元素以便搜索类别并分配一些样式。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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>为每个类别创建一个
option元素并将其添加至select元素中。Add line. Add line. Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>将
select元素添加至视图的top-right处。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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
定义服务 url
您可以使用 locator 访问地理编码服务。
为用于地理编码服务的 URL 定义一个变量
locatorUrl。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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
搜索地点
要查找地点，可以使用 locator addressToLocations 函数。基于类别执行本地搜索需要用于搜索的位置和类别名称。该函数可向地理编码服务发送请求，且服务返回具有名称、地址和位置信息的候选地点。使用该函数执行搜索，并将结果作为图形添加到地图中。
创建
findPlaces函数并调用addressToLocations。设置location、categories和outFields属性。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 查找地点并将其添加到地图中 function findPlaces(category, pt) { locator.addressToLocations(locatorUrl, { location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>清除现有弹出窗口和图形的视图。
Add line. Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 查找地点并将其添加到地图 function findPlaces(category, pt) { locator.addressToLocations(locatorUrl, { location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>为每个返回的结果创建
Graphic。为每个图形设置attributes、geometry、symbol和popupTemplate属性。将每个图形添加到view中。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // 返回的数据属性 geometry: result.location, // 返回的点 symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // 数据属性名称 content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>当加载视图、每次更改视图和变为静态时，将调用
findPlaces函数。Add line. Add line. Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}", // 数据属性名称 content: "{Place_addr}" } })); }); }); } // 搜索地图中心的位置 view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>公园地点应显示在地图上。通过拖动地图，您将看到视图中填充了新的位置。
添加处理程序以选择类别
类别更改时，可使用事件处理程序调用 findPlaces 函数。
添加事件监听器以监听类别的更改。
Add line. 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116<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/rest/locator", "geoscene/Graphic" ], function(geosceneConfig,Map, MapView, locator, Graphic) { geosceneConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "geoscene-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["选择地点类型...", "公园", "咖啡馆", "加油站", "美食", "酒店"]; 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(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locatorUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer"; // 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(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(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}" } })); }); }); } // 搜索地图中心的位置 view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // 监听类别更改并查找地点 select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
选择类别时，您应看到地图中心显示的所选类别的地点。当加载地图以及通过缩放或平移更改地图视图位置时，均会进行搜索。您还可单击图形以显示弹出窗口，其具有每个位置的名称和地址信息。
下一步是什么？
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟