react项目使用百度地图的一些经验

最近在react项目中使用百度地图，而且页面集合了百度地图的多种功能，感觉还是蛮复杂的，研究了很长时间，大概是把需要用到的东西都做了一遍。首先，因为react的生命周期机制以及webpack的模块化开发，导致百度地图很难引入到react中并使用，查看了网上很多方法，最后自己总结了一套自己的方法，感觉还挺好用。

 

我们需要在componentDidMount这个生命周期中初始化百度地图，因为这个生命周期是render过一次结构了的，所以能查找到结构中的id为myMap的div不至于导致报错

componentDidMount(){
        //SK码由于是项目注册的，不公开使用，所以我删掉了两位字母，如果需要的请自行到百度地图API官网注册
        this.MP('mYF2apbdwjfuo3HikGbZp5xNva8Q').then(BMap => { 
            
            let map = new BMap.Map('myMap')
            let pointSelf; // 本人位置坐标
            let point1 = new BMap.Point(113.26680951558,23.181518836079); // 默认本人位置坐标
            let point2 = new BMap.Point(113.26650951558,23.181518836079)  // 起点坐标
            let point3 = new BMap.Point(113.26640951558,23.182818836079)  // 终点坐标
            
            //手机定位本人位置
            let geolocation = new BMap.Geolocation();
            new Promise((resolve, reject)=>{
                geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){  
                        resolve(r)
                    }else{
                        reject()
                    }
                }) 
            }).then( r => {
                map.panTo(r.point);
                map.centerAndZoom(r.point, 18)
                map.enableScrollWheelZoom()
                pointSelf = r.point;

                let lat=r.point.lat;  
                let lon=r.point.lng; 
                console.log(lat,lon,'本人坐标点')

                //人物位置蓝色范围圆圈
                let blueBg = new BMap.Icon(blue, new BMap.Size(120,120));
                let marker = new BMap.Marker(pointSelf,{icon:blueBg});  // 创建标注
                map.addOverlay(marker);

                //人物位置
                let myIcon = new BMap.Icon(self, new BMap.Size(35,35));
                let marker1 = new BMap.Marker(pointSelf,{icon:myIcon});  // 创建标注
                map.addOverlay(marker1); 
                if(r.accuracy==null){     
                    alert("无法获取您的精确定位,请清理缓存后重新定位！");  
                        
                    return false;  
                    //用户拒绝地理位置授权  
                } 
            }).catch(function(){
                map.centerAndZoom(point1, 18)
                map.enableScrollWheelZoom();
                //人物位置蓝色范围圆圈
                let blueBg = new BMap.Icon(blue, new BMap.Size(120,120));
                let marker = new BMap.Marker(point1,{icon:blueBg});  // 创建标注
                map.addOverlay(marker);

                //人物位置
                let myIcon = new BMap.Icon(self, new BMap.Size(35,35));
                let marker1 = new BMap.Marker(point1,{icon:myIcon});  // 创建标注
                map.addOverlay(marker1); 
                map.setViewport([new BMap.Point(113.26650951558,23.181518836079),new BMap.Point(113.26640951558,23.182818836079)])
            })
            
            //起点坐标
            let startIcon = new BMap.Icon(start, new BMap.Size(40,75));
            let marker2 = new BMap.Marker(point2,{icon:startIcon});  // 创建标注
            map.addOverlay(marker2); 
            //终点坐标
            let endIcon = new BMap.Icon(end, new BMap.Size(40,75));
            let marker3 = new BMap.Marker(point3,{icon:endIcon});  // 创建标注
            map.addOverlay(marker3);

            //起点坐标添加文字标签
            var opts2 = {
                position : point2,    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(26, 15)    //设置文本偏移量
            }
            var label2 = new BMap.Label("股份楼", opts2);  // 创建文本标注对象
                label2.setStyle({
                    color : "#333",
                    fontSize : "16px",
                    fontWeight:'bold',
                    background:'none',
                    textShadow:'0 0 4px #fff',
                    border:'0'
                });
            marker2.setLabel(label2) 

            //终点坐标添加文字标签
            var opts3 = {
                position : point3,    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(26, 15)    //设置文本偏移量
            }
            var label3 = new BMap.Label("医院", opts3);  // 创建文本标注对象
                label3.setStyle({
                    color : "#333",
                    fontSize : "16px",
                    fontWeight:'bold',
                    background:'none',
                    textShadow:'0 0 4px #fff',
                    border:'0'
                });
            marker3.setLabel(label3) 

            //起点和终点之间的线
            // var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
            // driving.search(point2, point3);

            //添加放大缩小控件
            var nav_size = new BMap.Size(20, 20) //地图导航控件的参数
            var navControl = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                offset: nav_size,
                type: 3,
            })
            map.addControl(navControl) 

            //添加左下角定位按钮
            var geolocationControl = new BMap.GeolocationControl({
                offset: nav_size,
            })
            //监听左下角按钮定位
            geolocationControl.addEventListener('locationSuccess', function(e) {
                // 定位成功事件
                var address = ''
                address += e.addressComponent.province
                address += e.addressComponent.city
                address += e.addressComponent.district
                address += e.addressComponent.street
                address += e.addressComponent.streetNumber
                console.log('当前定位地址为：' + address)
            })
            geolocationControl.addEventListener('locationError', function(e) {
                // 定位失败事件
                console.log(e.message)
            })
            //map.addControl(geolocationControl) //添加左下角定位按钮
            
           
            // var lushu;
            // // 实例化一个驾车导航用来生成路线
            // var drv = new BMap.DrivingRoute('北京', {
            //     onSearchComplete: function(res) {
            //         if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
            //             var plan = res.getPlan(0);
                        
            //             var arrPois =[];
            //             for(var j=0;j<plan.getNumRoutes();j++){
            //                 var route = plan.getRoute(j);
            //                 arrPois= arrPois.concat(route.getPath());
            //             }
            //             map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#48a2fb'}));
            //             setTimeout(function(){
            //                 //map.setViewport(arrPois);
            //             },1000)
            //         }
            //     }
            // });
            // drv.search(new BMap.Point(113.26650951558,23.181518836079)  // 起点坐标
            // , new BMap.Point(113.26640951558,23.182818836079));

            function driveline(myP1,myP2){  
                var driving = new BMap.DrivingRoute(map);    //创建驾车实例     
                driving.search(myP1, myP2);                 //第一个驾车搜索     
                driving.setSearchCompleteCallback(function(){         
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组        
                var polyline = new BMap.Polyline(pts);            
                map.addOverlay(polyline); 
                })
            }

            driveline(point2,point3)
        })
   
    }

下面是MP函数创建script标签引入百度API

MP(ak) {
        return new Promise(function(resolve, reject) {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.dataset.name = 'map'
        script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=init` //callback调用init函数。
        document.head.appendChild(script)
        window.init = () => {
            resolve(BMap)
        }
        })
    }