在react 中使用百度地图进行逆地址解析

1.获取百度地图的key(密钥)

获取Key的地址：https://lbs.amap.com/api/webservice/guide/create-project/get-key

2.拿到密钥后，在public下的index.html文件中引入script

3.去配置文件

3.1 node_modules文件下找到 react-script - bin - config - webpack.config.dev.js 添加BMap (本地开发可以，bulid就有问题，报错BMap is not defined )

externals: {
   'BMap': 'BMap',
}

3.2 在public下的index.html 增加一个script标签 (本地开发可以，更新到线上就有问题，报错BMap is not defined，解决办法为 3.3中的 http- https )

<script>
      window.BMap = BMap;
</script>

在组件中使用Bmap 对象时需要加上window，否则会报错： BMap is not defined

3.3 http - https

4.在组件中使用百度地图API, 下面是实例

/*
     * 根据经纬度解析地址名称
     * @parameter1 lng 传入的经度
     * @parameter2 lat 传入的纬度
     */
    var BMap = window.BMap;
    var map = new BMap.Map('allmap');
    const map_click = (lng, lat, index) => {
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 12);
        var geoc = new BMap.Geocoder('allmap');
        geoc.getLocation(point, rs => {
            var addComp = rs.addressComponents;
            let location = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

            document.getElementsByClassName('location')[index] &&
                (document.getElementsByClassName('location')[index].innerHTML = isUndefined(location)
                    ? '无'
                    : location);
        });
    };

var map = new BMap.Map("address"); // 创建Map实例

map.Geocoder('allmap')百度地图的逆地址解析，首先必须声明

map.Point(lng,lat); //坐标点转换为百度坐标点

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别

map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的

在需要展示地址的地方调用它。

//参数解析

 //@parameter1 lng 传入的经度
 //@parameter2 lat 传入的纬度
 //@index  索引（这里是循环遍历的）

6.示例demo

在react 中使用百度地图 进行逆地址解析

在react 中使用百度地图进行逆地址解析