javaswing引入百度地图_【react】React怎么引用百度地图

最新推荐文章于 2024-04-06 09:28:48 发布

长劲鹿鹿

最新推荐文章于 2024-04-06 09:28:48 发布

阅读量271

点赞数

文章标签： javaswing引入百度地图

本文链接：https://blog.youkuaiyun.com/weixin_28746207/article/details/112084827

版权

本文介绍了如何在React项目中引入并使用百度地图，包括在百度地图开发文档申请秘钥的步骤，以及解决因模块化开发导致的BMap未定义问题。通过将百度地图API挂在window对象上，确保在React组件中可以正确调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前期准备：在百度地图开发文档中申请秘钥，申请流程按照网上的攻略走很简单的几个步骤 (如果项目紧急也可以私信找我要我的秘钥)

官网http://lbsyun.baidu.com/

index.html文件

//引入百度地图
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥">
    //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    //Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc
  </script>

demo.js(你需要用到百度地图的文件中)

componentDidMount(){
    this.renderMap()
}
//初始化地图的方法
 renderMap = () =>{
        this.map=new window.BMap.Map("orderDetailMap"); //初始化地图，这个id和下面的id相对应，之所以将初始化的地图放到this对象上，是方便其他方法调用map对象
        this.map.centerAndZoom('北京市', 10);
    }
  render(){
    return(
            <div>
                <div id="orderDetailMap">最好地图自己设置高度，否则地图容易不显示出来</div>
            <div>
          )
    }

原理解释：react是模块化开发，如果不是以import方式引入进来的话，会报错为BMap is undefined，但是放在window对象上是可以取得到的，刷新一下页面，在控制台中输入BMap是能够获取到，输入window发现BMap对象已经挂载到上面