最近用React做一个后台项目,里面需要引入百度地图的API,坑的不行。
由于React组件分离,如果直接在组件内定义百度地图API,会疯狂提示BMap is not defined
查了很多别人分享的解决方案,一种是在react入口html文件引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>后,在需要调用百度地图API的组件前定义 BMap=window.BMap()。
第二种方法是在wepack.config.js内定义
externals:{ 'BMap':'BMap' },
以上两种方法具体参考https://www.cnblogs.com/softidea/p/6946779.html
很不幸,这两种方法我试了N遍都无效,不是BMap is not defined就是Map is not defined。
以下是我试过可行的代码:
先定义一个创建引入百度地图script的函数(ak参数为密钥,在百度地图API内可注册,例子内我的密钥删除了几位),在ComponentDidMount时调用,调用成功后,再创建百度地图。
记得给百度地图的div设置宽高,要不然无显示
export default class BikeMap extends React.Component{
MP(ak) {
return new Promise(function(resolve, reject) {
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`;
document.head.appendChild(script)
window.init = () => {
resolve(window.BMap)
}
})
}
componentDidMount(){
this.MP("PAZGg1jfimrTHCIAsoQc9zfsRbh").then(BMap=>{
var map = new BMap.Map('allmap'); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom("福州",15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
});
}
render(){
//添加地图类型控件
return(
<div>
<div id='allmap' style={{width:600,height:600}}></div>
</div>
)
}
}