react中使用百度地图api

1.你首先先要注册一个百度账号，申请成为百度开发者，这样你就可以获得一个百度服务秘钥（ak）

2.记录好你自己的ak号，因为在你是用百度api的会使用到

3.在public中的index.html中进行引入百度api的文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

 4.在全局样式文件中，将样式进行修改

html,body,#root,.App{
  height: 100%;
}
html,body{
  margin: 0;
  padding: 0;
}

5.创建一个展示地图的组件

 componentDidMount(){
        // 初始化地图实例对象
        // 在react中全局对象要使用window进行访问，否则会造成eslint报错
        var map = new window.BMap.Map("container"); 
        // 初始化地图原点
        var point = new window.BMap.Point(116.404, 39.915);
        // 地图初始化，同时设置地图展示级别
        map.centerAndZoom(point, 15);  
    }
render(){
    return(
        <div className="map">
            <div id="container"></div>
        </div>
    )
}
}

样式文件中的样式
.map,#container{
    height: 100%;
}

 

6. 在需要使用地理信息的页面进行调用的使用

 // 页面dom元素加载完成调用
    componentDidMount() {
        this.getSwiperData()
        this.getGroupsData()
        this.getNews()
        // 调用地图信息获取当前城市信息
        var myCity = new window.BMap.LocalCity();
        myCity.get(async (res) => {
res里面的信息就可以获得你处在的位置
            console.log(res)
          
        });
    }