寻求可用于React.js集成Bing Maps的非弃用npm包

既然react-bingmaps已经弃用，下面是几个稳定可用的替代方案，覆盖不同需求场景：

1. 微软官方方案：@azure/maps-control（Azure Maps） #

Azure Maps是Bing Maps的官方演进产品，功能更丰富且持续维护。你可以直接使用官方的@azure/maps-control包，再简单封装成React组件即可：

import { useEffect, useRef } from 'react';
import * as atlas from '@azure/maps-control';
import '@azure/maps-control/dist/atlas.min.css';

const BingMap = ({ apiKey, center = [ -122.33, 47.6 ] }) => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current || mapRef.current) return;

    // 初始化地图
    mapRef.current = new atlas.Map(mapContainerRef.current, {
      authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: apiKey
      },
      center: center,
      zoom: 10
    });

    // 组件卸载时销毁地图
    return () => {
      if (mapRef.current) {
        mapRef.current.dispose();
        mapRef.current = null;
      }
    };
  }, [apiKey, center]);

  return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
};

export default BingMap;

优势：官方维护，功能完整（地图渲染、搜索、路由等），兼容性强。

2. 基于react-map-gl适配Bing Maps瓦片 #

如果你的项目已经在用react-map-gl（Mapbox GL的React封装），可以直接配置Bing Maps的瓦片源作为底图，无需额外专用包：

import { MapSource, MapLayer } from 'react-map-gl';

// 在Map组件内部添加
<MapSource
  id="bing-map"
  type="raster"
  tiles={[
    `https://t0.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=G,OS,P,RL&shading=hill&og=113&n=z`
  ]}
  tileSize={256}
/>
<MapLayer
  id="bing-layer"
  type="raster"
  source="bing-map"
  minzoom={0}
  maxzoom={20}
/>

优势：复用现有react-map-gl生态，适合已有地图组件的项目快速适配。

3. 直接封装Bing Maps原生JS SDK #

如果不想依赖任何第三方封装包，完全可以自己基于Bing Maps原生JS SDK写React组件，灵活性最高：

import { useEffect, useRef } from 'react';

const BingMap = ({ apiKey, center = [ -122.33, 47.6 ] }) => {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current) return;

    // 动态加载Bing Maps SDK脚本
    const script = document.createElement('script');
    script.src = `https://www.bing.com/api/maps/mapcontrol?key=${apiKey}&callback=initMap`;
    script.async = true;

    window.initMap = () => {
      new window.Microsoft.Maps.Map(mapContainerRef.current, {
        center: new window.Microsoft.Maps.Location(center[1], center[0]),
        zoom: 10
      });
    };

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
      delete window.initMap;
    };
  }, [apiKey, center]);

  return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
};

export default BingMap;

优势：无额外依赖，完全自定义控制地图行为，适合高度定制化需求。

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