Элемент управления Bing Maps V8 отображает пустые элементы div - PullRequest
Новая
       17

Элемент управления Bing Maps V8 отображает пустые элементы div

0 голосов
/ 23 марта 2019

Я пытаюсь использовать элемент управления Bing Maps v8.Я не получаю ошибок, но div, который должен отображать карту, пуст.

Я использую React.Вот мой код для корневого компонента: 

return (
      <div>
        <BingMap />
      </div>
    );

Затем у меня есть служебная функция, которая загружает скрипты при вызове: 

const loadDynamicScript = (config, callback) => {
    const existingScript = document.getElementById(config.id);

    if (!existingScript) {
      const script = document.createElement('script');
      script.src = config.link;
      script.id = config.id;
      document.body.appendChild(script);

      script.onload = () => {
        if (callback) callback();
      };
    }

    if (existingScript && callback) callback();
  };

  export default loadDynamicScript;

Затем у меня есть мой компонент BingMap: 

import * as React from 'react';
import scriptLoader from '../../utils/scriptLoader'

const config = {
    id: 'bingmaps',
    link: 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[mykey]'
}
declare global {
    interface Window { Microsoft: any; GetMap: any }
}

window.Microsoft = window.Microsoft || {};
window.GetMap = window.GetMap || {}; 


export default class BingMap extends React.Component<{}, {}> {
     myRef: any;

     GetMap = () => {
      new window.Microsoft.Maps.Map(this.myRef, { });


    componentDidMount() {
        console.log(this.myRef)
        window.GetMap = this.GetMap;
        scriptLoader(config, null)
    }

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

Когда мой компонент смонтирован, он вызывает загрузчик сценариев и загружает карты Bing, а затем выполняет функцию обратного вызова.Я не получаю никаких ошибок в консоли.

Вот сгенерированный div: 

<div class="map" id="test" style="height: 100%; position: relative;">

<div class="MicrosoftMap" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;">
<div style="position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0px; left: 0px;">
</div>
<div style="position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0px; left: 0px; pointer-events: none; transform: scale(1);">
</div></div></div>

Любое предложение приветствуется.

1 Ответ

0 голосов
/ 28 марта 2019

Возможно, это проблема CSS, попробуйте указать некоторую высоту и ширину для родительского div компонента BingMaps 

<div style={{ height: '100vh', width: '100vw' }}>
    <BingMaps />
</div>

Попробуйте, как указано выше

...