如何根据地点类型修改Google Maps自动完成的pac-icon图标

嘿，这个需求其实不难实现，核心就是利用Google Maps Autocomplete返回的types字段判断地点类型，然后给不同类型匹配对应的图标就行。我给你梳理一下具体步骤和代码示例：

核心思路 #

Autocomplete的预测结果里自带一个types数组，里面包含了当前地点的分类标签（比如airport、restaurant、hotel等）。我们可以通过监听预测结果的变化，自定义渲染下拉列表的每一项，根据types里的标签匹配对应的图标。

具体实现步骤 #

1. 准备基础HTML结构 #

先创建输入框和用来展示自定义预测列表的容器：

<input id="autocomplete" placeholder="输入地点" type="text" style="width: 300px; padding: 8px;">
<div id="predictions-list" style="border: 1px solid #ccc; max-height: 200px; overflow-y: auto; width: 300px;"></div>

2. 初始化Autocomplete并启用自定义渲染 #

在初始化Autocomplete时，禁用默认UI，这样我们就能完全控制预测列表的样式和内容：

function initAutocomplete() {
  // 获取输入框元素
  const input = document.getElementById('autocomplete');
  // 初始化Autocomplete，可按需限制地点类型或区域
  const autocomplete = new google.maps.places.Autocomplete(input, {
    types: ['geocode', 'establishment'], // 包含普通地址和商业场所
    componentRestrictions: { country: 'gb' } // 可选，限制为英国，可根据需求修改
  });

  // 禁用默认下拉UI，开启自定义渲染
  autocomplete.setOptions({
    renderOptions: {
      suppressDefaultUI: true
    }
  });

  const predictionsList = document.getElementById('predictions-list');

3. 监听预测结果变化并渲染自定义列表 #

通过predictions_changed事件获取最新的预测结果，遍历每个结果并根据types匹配图标：

// 监听预测结果变化事件
  autocomplete.addListener('predictions_changed', () => {
    const predictions = autocomplete.getPlacePredictions();
    renderCustomPredictions(predictions);
  });

  // 自定义渲染预测列表的函数
  function renderCustomPredictions(predictions) {
    predictionsList.innerHTML = ''; // 清空旧列表

    predictions.forEach(prediction => {
      const listItem = document.createElement('div');
      listItem.style.padding = '8px';
      listItem.style.cursor = 'pointer';
      listItem.style.borderBottom = '1px solid #eee';
      // 点击列表项时选中该地点
      listItem.addEventListener('click', () => {
        autocomplete.setPlaceId(prediction.place_id);
        predictionsList.innerHTML = ''; // 选中后关闭列表
      });

      // 根据地点类型获取对应图标
      const iconSrc = getIconForPlaceType(prediction.types);
      // 创建图标元素
      const icon = document.createElement('img');
      icon.src = iconSrc;
      icon.style.width = '20px';
      icon.style.height = '20px';
      icon.style.marginRight = '8px';
      icon.alt = prediction.description;

      // 创建地点描述文本
      const textSpan = document.createElement('span');
      textSpan.textContent = prediction.description;

      // 组装列表项
      listItem.appendChild(icon);
      listItem.appendChild(textSpan);
      predictionsList.appendChild(listItem);
    });
  }

4. 编写类型与图标映射函数 #

这个函数根据types数组里的标签，返回对应图标的路径。注意优先匹配更具体的类型（比如airport比establishment更精准）：

// 地点类型到图标的映射函数
  function getIconForPlaceType(types) {
    // 可根据需求扩展更多类型
    if (types.includes('airport')) {
      return './icons/airport.png'; // 替换成你的机场图标路径
    } else if (types.includes('restaurant')) {
      return './icons/restaurant.png';
    } else if (types.includes('hotel')) {
      return './icons/hotel.png';
    } else if (types.includes('park')) {
      return './icons/park.png';
    } else if (types.includes('geocode')) {
      // 普通地址用默认地址图标
      return './icons/default-address.png';
    } else {
      // 其他类型用默认图标
      return './icons/default.png';
    }
  }

5. 可选：处理选中地点后的逻辑 #

如果需要在用户选中地点后做进一步操作（比如显示地图标记），可以监听place_changed事件：

// 监听地点选中事件
  autocomplete.addListener('place_changed', () => {
    const place = autocomplete.getPlace();
    if (!place.geometry) {
      console.log(`No details available for input: '${place.name}'`);
      return;
    }
    // 这里可以添加你的逻辑，比如在地图上标记该地点
    console.log('选中的地点:', place);
  });
}

6. 加载Google Maps API时包含Places库 #

确保加载API时带上places库，否则Autocomplete功能无法使用：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

额外提示 #

• 如果你不想自己准备图标，可以使用Google的Material Icons，比如用<i class="material-icons">flight</i>代替img标签，只需引入Material Icons的样式文件即可。
• types数组可能包含多个标签，比如机场的types可能是['airport', 'establishment', 'point_of_interest']，所以判断时要优先匹配最具体的那个标签。
• 自定义渲染的样式可以根据你的项目需求调整，比如添加 hover 效果等。

内容的提问来源于stack exchange，提问作者Mohan Raja