在React项目内引入百度地图API的方法

<link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON">
<title>在React项目内引入百度地图API的方法 - 水搁浅了小鱼鱼鱼 - CSDN博客</title>
    
                <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/detail-76b7ce2e9e.min.css">
        

        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/themes/skin-finalboss/skin-finalboss-bf0bc95082.min.css">

<script type="text/javascript">
    var username = "weixin_44214142";
    var blog_address = "https://blog.csdn.net/weixin_44214142";
    var static_host = "https://csdnimg.cn/release/phoenix/";
    var currentUserName = "";
    var isShowAds = true;
    var isOwner = false;
    var loginUrl = "http://passport.csdn.net/account/login?from=https://blog.csdn.net/weixin_44214142/article/details/89424898"
    var blogUrl = "https://blog.csdn.net/";

    var curSkin = "skin-finalboss";
    // 收藏所需数据
    var articleTitle = "在React项目内引入百度地图API的方法";
    var articleDesc = "最近用React做一个后台项目，里面需要引入百度地图的API，坑的不行。由于React组件分离，如果直接在组件内定义百度地图API，会疯狂提示BMapisnotdefined查了很多别人分享的解决方案，一种是在react入口html文件引入&lt;scripttype=text/javascriptsrc=http://api.map.baidu.com/api?v=2....";
    // 第四范式所需数据
    var articleTitles = "在React项目内引入百度地图API的方法 - 水搁浅了小鱼鱼鱼";
    
    var nickName = "水搁浅了小鱼";
    var isCorporate = false;
    var subDomainBlogUrl = "https://blog.csdn.net/"
    var digg_base_url = "https://blog.csdn.net/weixin_44214142/phoenix/comment";
    var articleDetailUrl = "https://blog.csdn.net/weixin_44214142/article/details/89424898";
</script>
<script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--js引用-->
        <script src="//g.csdnimg.cn/??fixed-sidebar/1.1.6/fixed-sidebar.js,report/1.0.6/report.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css">
<style>
    .MathJax, .MathJax_Message, .MathJax_Preview{
        display: none
    }
</style>

原创

在React项目内引入百度地图API的方法

2019-04-20 22:38:24 水搁浅了小鱼 阅读数 177

分类专栏： Javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44214142/article/details/89424898

最近用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>
        )
    }
}