我正在尝试使用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>
任何建议表示赞赏。
它可能是CSS问题,尝试给BingMaps组件的父div提供一些高度和宽度
<div style={{ height: '100vh', width: '100vw' }}>
<BingMaps />
</div>
试试如上