React使用高德地图

底部先封装一个script的加载工具

如下图

export default function remoteLoad(url, hasCallback) {
    return createScript(url)

    function createScript(url) {
        let scriptElement = document.createElement('script')
        document.body.appendChild(scriptElement)
        let promise = new Promise((resolve, reject) => {
            scriptElement.addEventListener('load', e => {
                removeScript(scriptElement)
                if (!hasCallback) {
                    resolve(e)
                }
            }, false)

            scriptElement.addEventListener('error', e => {
                removeScript(scriptElement)
                reject(e)
            }, false)

            if (hasCallback) {
                window.____callback____ = function () {
                    resolve()
                    window.____callback____ = null
                }
            }
        })

        if (hasCallback) {
            url += '&callback=____callback____'
        }

        scriptElement.src = url
        return promise
    }

    function removeScript(scriptElement) {
        document.body.removeChild(scriptElement)
    }
}

实际使用中调用

首先标签的实现

<div className="bm bm-f1" style={
  {height: '100%', backgroundColor: '#313348'}}>
                    <div id="container" style={
  {width: '100%'}}></div>
                </div>

在componentDidMount生命周期里引入&