Question

在JavaScript中使用GoogleMaps API，我试图在地图上点击城市的名称（和位置）。

首先，我虽然可以使用此example中所述的PointOfInterest Event功能，但是城市似乎无法提供所需的placeId。

其次，我尝试使用here描述的反向地理编码机制来获取该位置的完整地址，并从此处提取城市名称（地点）：

this.map.addListener('click', (event) => {
    this.geocoder.geocode({
        location: event.latLng,
    }, (results, status) => {
        if(status === 'OK')
        {
            if(results && results.length)
            {
                const addressResult = results[0];

                if(addressResult.address_components)
                {
                    addressResult.address_components.forEach((component) => {
                        if(component.types.includes('locality'))
                        {
                            console.log(component.long_name);
                        }
                    });
                }
            }
        }
    });
});

这种方法给了我很好的结果，但它也显示了一些问题：

尽管将地图区域设置设置为en，我仍然会获得地理编码器返回的地址中显示的城市名称。例如，我得到Genève（法语名称 Geneva ）而不是 Geneva ，我得到了 Munchen （慕尼黑的德语名称）代替慕尼黑
点击一个城市，如果点击的位置属于另一个地方，我有时会得到另一个城市。

任何有关点击城市名称的建议都会非常感激。

Answer 1

执行反向地理编码时，服务将返回不同类型的结果。第一个通常是最近的街道地址，之后您将获得其他结果，如邻居，POI，地点，行政区域和国家。

在您的代码中，您可以选择第一个结果（最近的街道地址）来获取城市的名称。在这种情况下，您应该知道地理编码服务以本地语言而不是您在Maps JavaScript API初始化中指定的语言返回街道和地点的名称。您可以在此博客文章中阅读有关此政策的信息：

https://maps-apis.googleblog.com/2014/11/localization-of-street-addresses-in.html

对于政治实体，此规则未应用，因此您将获得在JavaScript API初始化中指定的语言类型位置或管理区域的项目。

为了获得英语的地点名称，您应该按类型地点过滤结果，并阅读其地址组件以获取地点名称。

我稍微修改了你的代码以获得英文版本的地方，请注意变量filtered_array。

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 47.295077, lng: 9.211874},
      zoom: 8
    });

    var geocoder = new google.maps.Geocoder();

    map.addListener('click', (event) => {
      geocoder.geocode({
        location: event.latLng,
      }, (results, status) => {
        if(status === 'OK') {
            if(results && results.length) {
                var filtered_array = results.filter(result => result.types.includes("locality")); 
                var addressResult = filtered_array.length ? filtered_array[0]: results[0];

                if(addressResult.address_components) {
                    addressResult.address_components.forEach((component) => {
                        if(component.types.includes('locality')) {
                            console.log(component.long_name);
                        }
                    });
                }
            }
        }
    });
  });
}

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

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&language=en&callback=initMap"
    async defer></script>

我希望这有帮助！

获取GoogleMaps

1 个答案: