Компонент Bing Map в React

Question

Я хочу создать компонент для отображения карты Bing в React.js с TypeScript.Я знаю, что для этой цели в github есть очень важный компонент.но я хочу создать этот компонент с нуля для себя.Я создал класс в реакции и в componentWillMount функция вставила тег сценария в head моего html:

    componentWillMount() {
        const script = document.createElement("script");
        var scriptURL = "<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=" + this.props.apiKey + "' ></script>";
        const scriptText = document.createTextNode(scriptURL);

        script.appendChild(scriptText);
        document.head.appendChild(script);
    }

, когда я хочу создать карту, а затем этот документ в componentDidMountфункция как это:

componentDidMount() {
        var map = new Microsoft.Maps.Map(this.mapElement);
    }

Я получаю эту ошибку:

Не могу найти имя «Microsoft».

как мне импортировать 'Microsoftмодуль для моего компонента?

Answer 1

componentWillMount будет устаревшим в следующей основной версии React, лучше поместить весь код в componentDidMount

Попробуйте это:

componentDidMount() {
    const script = document.createElement("script");
    script.type = 'text/javascript';
    script.src = 'https://www.bing.com/api/maps/mapcontrol?key=' + this.props.apiKey; 
    document.head.appendChild(script);

    script.onload = function() {
        this.map = new Microsoft.Maps.Map(this.mapElement);
    }
}

Answer 2

Вот минималистская реализация компонента React BingMaps без каких-либо зависимостей от определений типа BingMaps.

Сначала была представлена ​​служба для загрузки API BingMaps и типа Microsoft:

export interface MapWindow extends Window {
  Microsoft: any;
}

declare let window: MapWindow;
export let Microsoft: any;


export function loadBingApi(key?: string): Promise<void> {
  const callbackName = "bingAPIReady";
  let url = `https://www.bing.com/api/maps/mapcontrol?callback=${callbackName}`;
  if (key) {
    url += `&key=${key}`;
  }

  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.defer = true;
    script.src = url;
    window[callbackName] = () => {
      Microsoft = window.Microsoft;
      resolve();
    };
    script.onerror = (error: Event) => {
      reject(error);
    };
    document.body.appendChild(script);
  });
}

Вот компонент Map, который принимает mapOptions в качестве реквизита:

interface IMapProps {
    mapOptions?: any;
}

export default class BingMap extends React.Component<IMapProps, any> {
  private mapRef = React.createRef<HTMLDivElement>();

  public componentDidMount() {
    loadBingApi().then(() => {
      this.initMap();
    });
  }

  public render() {
    return <div ref={this.mapRef} className="map" />;
  }

  private initMap() {
    const map = new Microsoft.Maps.Map(this.mapRef.current);
    if (this.props.mapOptions) {
      map.setOptions(this.props.mapOptions);
    }
    return map;
  }
}

Использование

<BingMap
    mapOptions={{
      center: [47.60357, -122.32945],
      credentials:
        "--BingMaps key goes here--"
    }}
/>

Вот демонстрационная версия

Answer 3

Попробуйте это:

componentWillMount() {
    const script = document.createElement("script"); // Creates <script></script>
    script.type = 'text/javascript'; // Set type
    script.src = 'https://www.bing.com/api/maps/mapcontrol?key=' + this.props.apiKey; // Set source
    document.head.appendChild(script); // Add script to page
}