如何在谷歌地图 API JS 中仅获取城市名

如果你正在使用谷歌地图 API JS，有时你可能只想获取地图上显示的城市名称，而不需要其他地理信息（如坐标，街道名称等）。这篇文章将介绍如何仅获取城市名称。

实现步骤

1. 初始化谷歌地图 API JS

   function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
           center: {lat: 37.7749, lng: -122.4194},
           zoom: 8
       });
   }
   

2. 添加事件监听器来捕获地图中心位置的变化。

   map.addListener('center_changed', function() {
       //code here
   });
   

3. 获取地图中心的坐标，通过 Geocoder API 将坐标转换成城市名称。

   var geocoder = new google.maps.Geocoder;
   var center = map.getCenter();
   geocoder.geocode({'location': center}, function(results, status) {
       if (status === 'OK') {
           if (results[0]) {
               var city = null;
               for (var i = 0; i < results[0].address_components.length; i++) {
                   var types = results[0].address_components[i].types;
                   if (types.indexOf('locality') !== -1) {
                       city = results[0].address_components[i].long_name;
                       break;
                   }
               }
               console.log(city);
           } else {
               console.log('No results found');
           }
       } else {
           console.log('Geocoder failed due to: ' + status);
       }
   });
   

4. 将获取到的城市名称存储在一个变量中，以便在其他地方使用。

代码片段

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.7749, lng: -122.4194},
        zoom: 8
    });
    map.addListener('center_changed', function() {
        var geocoder = new google.maps.Geocoder;
        var center = map.getCenter();
        geocoder.geocode({'location': center}, function(results, status) {
            if (status === 'OK') {
                if (results[0]) {
                    var city = null;
                    for (var i = 0; i < results[0].address_components.length; i++) {
                        var types = results[0].address_components[i].types;
                        if (types.indexOf('locality') !== -1) {
                            city = results[0].address_components[i].long_name;
                            break;
                        }
                    }
                    console.log(city);
                } else {
                    console.log('No results found');
                }
            } else {
                console.log('Geocoder failed due to: ' + status);
            }
        });
    });
}

总结

通过 Geocoder API 将坐标转换成城市名称，我们可以在谷歌地图 API JS 中仅获取城市名称。这样做可能会使你的代码更加高效。