Angular 5中Rxjs map带条件返回问题及Google Maps API获取国名需求

1. Angular 5中RxJS map操作符实现带条件返回逻辑 #

在Angular 5对应的RxJS 5.x版本里，map操作符结合普通的条件判断就能轻松实现你要的逻辑，不用绕弯子。我给你几个实用的场景示例：

场景1：根据数据返回不同的映射结果 #

比如从后端拿用户数据，根据用户角色返回不同结构的对象：

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getProcessedUser() {
  return this.http.get('/api/user')
    .pipe(
      map(user => {
        // 条件判断：管理员返回带权限的对象，普通用户返回基础信息
        if (user.role === 'admin') {
          return {
            id: user.id,
            name: user.name,
            permissions: user.permissions
          };
        } else {
          return {
            id: user.id,
            name: user.name,
            role: user.role
          };
        }
      })
    );
}

场景2：不满足条件时抛出错误 #

如果需要在数据不符合要求时终止流并抛出错误，结合throwError（RxJS 5.x也可以用Observable.throw）就行：

import { map } from 'rxjs/operators';
import { throwError } from 'rxjs';

getValidatedData() {
  return this.http.get('/api/data')
    .pipe(
      map(data => {
        if (data.status === 'success') {
          return data.payload;
        } else {
          // 抛出错误后，你可以在订阅时用catchError处理
          throw throwError('数据状态无效，请检查后端返回');
        }
      })
    );
}

场景3：过滤不符合条件的数据 #

如果只是想跳过不符合条件的单条数据，可以先在map里返回null，再用filter过滤掉：

import { map, filter } from 'rxjs/operators';

getActiveProduct() {
  return this.http.get('/api/product/123')
    .pipe(
      map(product => product.isActive ? product : null),
      filter(product => product !== null)
    );
}

2. 通过Google Maps API仅获取国家名称 #

要只拿到国家名称，核心是用Google的地理编码/反向地理编码API，然后从返回结果里筛选country类型的地址组件。分两种情况给你代码：

情况1：已知经纬度（反向地理编码） #

// 前提：已经加载了Google Maps JS API，且有有效的API Key
function getCountryNameFromCoords(lat, lng) {
  const geocoder = new google.maps.Geocoder();
  const latlng = new google.maps.LatLng(lat, lng);
  
  geocoder.geocode({ 'latLng': latlng }, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      // 遍历地址组件，找到类型为country的项
      for (const component of results[0].address_components) {
        if (component.types.includes('country')) {
          const fullCountryName = component.long_name; // 比如"China"
          // const shortCountryCode = component.short_name; // 比如"CN"
          console.log('国家名称:', fullCountryName);
          return fullCountryName;
        }
      }
    } else {
      console.error('反向地理编码请求失败:', status);
    }
  });
}

情况2：已知地址（地理编码） #

如果是从地址字符串提取国家名称，逻辑类似：

function getCountryNameFromAddress(address) {
  const geocoder = new google.maps.Geocoder();
  
  geocoder.geocode({ 'address': address }, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      for (const component of results[0].address_components) {
        if (component.types.includes('country')) {
          console.log('国家名称:', component.long_name);
          return component.long_name;
        }
      }
    } else {
      console.error('地理编码请求失败:', status);
    }
  });
}

关键注意点 #

• 必须在Google Cloud Console启用Geocoding API，并使用有效的API Key，否则请求会被拒绝。
• Angular项目中，要在index.html里正确加载Maps脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places"></script>

• 注意API的调用配额和计费规则，别超出限制。

内容的提问来源于stack exchange，提问作者Cenk YAGMUR