反向地理编码

了解如何使用地理编码服务查找地理坐标。

反向地理编码是将位置转换为地址或地点的过程。要反向地理编码，您可以使用地理编码服务和 reverseGeocode 操作。此操作需要一个初始位置，并返回一个具有地名和位置等属性的地址。为了简化访问地理编码服务，可以使用 locator 模块。

在本教程中，您将使用 locator 进行反向地理编码，并在地图上查找最接近您所单击位置处的地址。

步骤

创建新 Pen

要开始使用，请完成显示地图教程或使用此 Pen。

添加模块

在 require 语句中，添加 locator 模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Change line
<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: Reverse geocode</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"

], function(geosceneConfig,Map, MapView, locator) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "geoscene-navigation"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [116.4,39.9],
    zoom: 12
  });

  const serviceUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer";

  view.on("click", function(evt){
      const params = {
        location: evt.mapPoint
      };

     locator.locationToAddress(serviceUrl, params)
        .then(function(response) { // Show the address found
          const address = response.address;
          showAddress(address, evt.mapPoint);
        }, function(err) { // Show no address found
          showAddress("No address found.", evt.mapPoint);
        });

    });

  function showAddress(address, pt) {
    view.popup.open({
      title:  + Math.round(pt.longitude * 100000)/100000 + ", " + Math.round(pt.latitude * 100000)/100000,
      content: address,
      location: pt
    });
  }

});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

定义服务 url

使用 locator 模块访问地理编码服务和 reverseGeocode 操作。

定义一个变量 serviceUrl 以引用地理编码服务。

Add line.
<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: Reverse geocode</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"

], function(geosceneConfig,Map, MapView, locator) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "geoscene-navigation"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [116.4,39.9],
    zoom: 10  });

  const serviceUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer";

  view.on("click", function(evt){
      const params = {
        location: evt.mapPoint
      };

     locator.locationToAddress(serviceUrl, params)
        .then(function(response) { // Show the address found
          const address = response.address;
          showAddress(address, evt.mapPoint);
        }, function(err) { // Show no address found
          showAddress("No address found.", evt.mapPoint);
        });

    });

  function showAddress(address, pt) {
    view.popup.open({
      title:  + Math.round(pt.longitude * 100000)/100000 + ", " + Math.round(pt.latitude * 100000)/100000,
      content: address,
      location: pt
    });
  }

});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

反向地理编码

使用处理程序捕获地图上的点击位置，然后调用地理编码服务。如果找到地址，则服务返回该地址；如果未找到结果，则返回错误。在弹出窗口中使用纬度、经度和地址显示结果。

在主函数中，将 click 处理器添加至视图。创建 params 并将 location 设置为 evt.mapPoint。

Add line.Add line.Add line.Add line.Add line.Add line.
<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: Reverse geocode</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"

], function(geosceneConfig,Map, MapView, locator) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "geoscene-navigation"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [116.4,39.9],
    zoom: 12
  });

  const serviceUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer";

  view.on("click", function(evt){
      const params = {
        location: evt.mapPoint
      };

     locator.locationToAddress(serviceUrl, params)
        .then(function(response) { // Show the address found
          const address = response.address;
          showAddress(address, evt.mapPoint);
        }, function(err) { // Show no address found
          showAddress("No address found.", evt.mapPoint);
        });

    });

  function showAddress(address, pt) {
    view.popup.open({
      title:  + Math.round(pt.longitude * 100000)/100000 + ", " + Math.round(pt.latitude * 100000)/100000,
      content: address,
      location: pt
    });
  }

});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 showAddress 函数以显示坐标和对应的地址。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<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: Reverse geocode</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"

], function(geosceneConfig,Map, MapView, locator) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "geoscene-navigation"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [116.4,39.9],
    zoom: 12
  });

  const serviceUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer";

  view.on("click", function(evt){
      const params = {
        location: evt.mapPoint
      };

     locator.locationToAddress(serviceUrl, params)
        .then(function(response) { // Show the address found
          const address = response.address;
          showAddress(address, evt.mapPoint);
        }, function(err) { // Show no address found
          showAddress("No address found.", evt.mapPoint);
        });

    });

  function showAddress(address, pt) {
    view.popup.open({
      title:  + Math.round(pt.longitude * 100000)/100000 + ", " + Math.round(pt.latitude * 100000)/100000,
      content: address,
      location: pt
    });
  }

});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

更新 click 处理程序以调用 locationToAddress，以便对 mapPoint 进行反向地理编码。使用 showAddress 函数显示结果的弹出窗口。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<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: Reverse geocode</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"

], function(geosceneConfig,Map, MapView, locator) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "geoscene-navigation"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [116.4,39.9],
    zoom: 12
  });

  const serviceUrl = "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer";

  view.on("click", function(evt){
      const params = {
        location: evt.mapPoint
      };

     locator.locationToAddress(serviceUrl, params)
        .then(function(response) { // 显示找到的地址
          const address = response.address;
          showAddress(address, evt.mapPoint);
        }, function(err) { // 显示未找到地址
          showAddress("No address found.", evt.mapPoint);
        });

    });

  function showAddress(address, pt) {
    view.popup.open({
      title:  + Math.round(pt.longitude * 100000)/100000 + ", " + Math.round(pt.latitude * 100000)/100000,
      content: address,
      location: pt
    });
  }

});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序

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

单击地图以对位置进行反向地理编码，并返回具有最近地址的弹出窗口。

下一步是什么？

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

上一主题搜索地址空间分析查找空间关系

解决方案

在 CodePen 中查看

估计时间

10 分钟