React使用高德地图

本文主要是介绍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 = urlreturn 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生命周期里引入&

这篇关于React使用高德地图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---