Azure Maps搜索报错：TypeError: 无法读取undefined的'initialize'属性

错误原因定位 #

你遇到的TypeError: 无法读取undefined的'initialize'属性，结合代码来看主要有三个核心问题：

1. 地图实例未完成初始化就调用MapControlCredential #

MapControlCredential依赖已经初始化完成的Azure Maps地图实例，如果mapRef.current还没完成初始化（比如地图DOM未渲染完成、ready事件未触发），就会导致内部调用initialize方法时找不到目标对象，抛出该错误。

2. 混合使用await与.then()导致response为undefined #

你在await searchURL.searchAddress(...)后链式调用了.then()，但.then()内部没有返回响应对象，导致const response最终是undefined，后续执行response.json()时自然引发错误。

3. 搜索参数格式错误 #

searchAddress方法的第二个参数需要传入包含query字段的配置对象，而非直接传搜索字符串。

修正后的代码示例 #

const handleSearch = async () => {
    if (!searchInput) return;
    if (!mapRef.current) {
        console.error('地图实例未初始化');
        return;
    }
    
    setSearching(true);
    
    try {
        // 确保地图已初始化后再创建凭证
        const pipeline = MapsURL.newPipeline(new MapControlCredential(mapRef.current));
        const searchURL = new SearchURL(pipeline);
        
        console.log("Searching for:", searchInput);
        // 正确传递搜索参数，且不混用await和then
        const response = await searchURL.searchAddress(Aborter.timeout(10000), {
            query: searchInput
        });
        
        console.log("'Response' type:", typeof(response));
        const results = await response.json();
        console.log("Results:", results);
        
        if (results && results.results.length > 0) { // Azure Maps返回结构为results.results
            const coordinates = results.results[0].position;
            console.log("Coordinates:", coordinates);
            // 更新地图视野到搜索结果位置
            mapRef.current.setCamera({
                center: [coordinates.lon, coordinates.lat],
                zoom: 12
            });
        }
    } catch (error) {
        console.error("搜索期间出错：", error);
    } finally {
        setSearching(false);
    }
};

额外注意事项 #

• 确保在地图的ready事件触发后再执行搜索逻辑，比如在组件挂载时监听：

  useEffect(() => {
      if (mapRef.current) {
          mapRef.current.events.add('ready', () => {
              // 地图已初始化，可执行搜索相关操作
          });
      }
  }, []);
  

• 确认Aborter已正确导入：import { Aborter } from '@azure/maps-rest';
• 检查Azure Maps的订阅密钥是否正确配置，且该密钥拥有搜索API的访问权限

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