如何使用 Google Nearby API 获取最近的城市？

Question

我在一个项目中工作，我应该使用纬度、经度显示距设备位置约 20 公里的所有城市（地区）。

此外，设备位置的位置不在结果上。

有人可以帮我吗？

我明确表示我不是开发人员。

非常感谢您的帮助！

我在 Postman 上尝试了下面的请求，但我只有两个结果，而不是超过 10 个。

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=48.7707452,2.0803735&radius=20000&type=locality&key=AIzxxxxxxE

以下是回复：

`

{
    "html_attributions": [],
    "results": [
        {
            "geometry": {
                "location": {
                    "lat": 48.801408,
                    "lng": 2.130122
                },
                "viewport": {
                    "northeast": {
                        "lat": 48.82857804347341,
                        "lng": 2.168480543860636
                    },
                    "southwest": {
                        "lat": 48.77916591232869,
                        "lng": 2.069908968772275
                    }
                }
            },
            "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/geocode-71.png",
            "icon_background_color": "#7B9EB0",
            "icon_mask_base_uri": "https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet",
            "name": "Versailles",
            "photos": [
                {
                    "height": 3024,
                    "html_attributions": [
                        "<a href=\"https://maps.google.com/maps/contrib/116593793480207812084\">Jessy Velazquez</a>"
                    ],
                    "photo_reference": "AUjq9jkmbt7CKGCwJfn3ZlpLVC-wGt_1svXYWTyA5p9pgcmd6XCNbEcwAFFjF0xe2tuLIYm5F_42s0Q4dbI0ifJTHZy5-gfzQfSo2jMp_ATL-WfPl3jJHf8WbnRVLSslBCKg3j5jYQBU2pkyb2Tjkk7PLZSGSuv9ycLQu-j2zTBWUM9x-ejT",
                    "width": 4032
                }
            ],
            "place_id": "ChIJvSD0dbR95kcRukqEDa0AnoY",
            "reference": "ChIJvSD0dbR95kcRukqEDa0AnoY",
            "scope": "GOOGLE",
            "types": [
                "locality",
                "political"
            ],
            "vicinity": "Versailles"
        },
        {
            "geometry": {
                "location": {
                    "lat": 48.7738734,
                    "lng": 2.0360157
                },
                "viewport": {
                    "northeast": {
                        "lat": 48.7992215538692,
                        "lng": 2.055979168810353
                    },
                    "southwest": {
                        "lat": 48.75589319907799,
                        "lng": 1.994393632933018
                    }
                }
            },
            "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/geocode-71.png",
            "icon_background_color": "#7B9EB0",
            "icon_mask_base_uri": "https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet",
            "name": "Montigny-le-Bretonneux",
            "photos": [
                {
                    "height": 4160,
                    "html_attributions": [
                        "<a href=\"https://maps.google.com/maps/contrib/100080658394344210444\">ali imoune</a>"
                    ],
                    "photo_reference": "AUjq9jn0-yeBGJe57tERWIrudEEdhV_zdqrrtGna1VvH-vI33q2FMfh7c_YaZpK4VXR1eWFhU7MYt0rhxZujTMnM3DL7F5vOXX0zepVThDaB_I5gZ0Io2RjnXbYh4ZDInZ-0aXDY-w4xdisBO_4oAAVgot1516GAbE-He8jvgCacDUcp03w1",
                    "width": 3120
                }
            ],
            "place_id": "ChIJDxMIwS-B5kcRHthZxYnQcNo",
            "reference": "ChIJDxMIwS-B5kcRHthZxYnQcNo",
            "scope": "GOOGLE",
            "types": [
                "locality",
                "political"
            ],
            "vicinity": "Montigny-le-Bretonneux"
        }
    ],
    "status": "OK"
}`

Answer 1

Nearby Search of Places API 不支持

type=locality

请参阅地点类型文档.

正如您在文档中看到的那样，

types=locality

仅在表 2 和表 3 中可用：

表2中的Place类型值有以下几种用法：

• 作为 Place 详细信息请求结果的一部分（例如，调用 fetchPlace()），或返回 Place 结果的任何地方。请求必须指定适当的“类型”数据字段.
• 作为自动完成位置预测的一部分。有关使用这些值的规则的更多信息，请参阅Places Autocomplete。
• 表示地址组件。

参考：https://developers.google.com/maps/documentation/places/web-service/supported_types#table2

那里有一个注释，在地方搜索的type过滤器中

不支持

这种类型。

这引出了我们的问题......

如何到达最近的城市？

为了能够使用 Places API 获取附近的城市，您可以使用 Places API 的Place Autocomplete。

Place Autocomplete 还具有

types

、

radius

和

location

参数，您可以像 Nearby Search 一样使用这些参数。

但是由于 Place Autocomplete 旨在响应 user input 并且需要

input

参数，您的用户仍然需要在发送请求之前输入一些内容。

这是一个示例请求：

https://maps.googleapis.com/maps/api/place/autocomplete/json?
input={INPUT_ANY_CITY_HERE_WITHIN_20KM_OF_LOCATION}
&location=48.7707452,2.0803735
&radius=20000
&strictbounds=true
&types=(cities)
&key=YOUR_API_KEY

注意：我包括

strictbounds

只返回那些严格在由位置和半径定义的区域内的地方。这是一个限制，而不是偏见，意味着即使与用户输入匹配，也不会返回该区域之外的结果。

请求只会返回本示例地图圈内的城市：

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: {lat:48.7707452, lng: 2.0803735},
    mapTypeId: "terrain",
  });

    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: {lat:48.7707452, lng: 2.0803735},
      radius: 20000, 
    });
  }

window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<html>
  <head>
    <title>Circles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

希望这有帮助！