调用百度地图API，实现两种效果

效果一：
地图拖动，中心定位标注不动，准确实时获取地图拖动后的中心点位置，并获取中心点位置一定区域内的十个具体位置。

解决思路：地图拖动会触发dragend事件，我们监听这个事件，并实时获取拖动后的地图的中心点位置，然后调用相关api由中心点位置来获取附近的具体位置，中心点的标注通过定位的方式固定到地图中心。

//在HTML页面
//需要两个容器，一个装地图，一个装中心点标注
<div className="map">
     <div className="baiduMap" id="container" />
     <div className="h5-icon-gps-address" />
</div>

//中心标注的样式
.map{
    position: relative;
    .baiduMap{
         height: 270px;
         width: 100%;
    }
   .h5-icon-gps-address{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        font-size: 28px;
    }
 }

//Webview.js百度地图获取地理位置
getCurrentPosition(){
        return new Promise(function(resolve, reject){
            let geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                //关于状态码
                //BMAP_STATUS_SUCCESS    检索成功。对应数值“0”。
                //BMAP_STATUS_CITY_LIST    城市列表。对应数值“1”。
                //BMAP_STATUS_UNKNOWN_LOCATION    位置结果未知。对应数值“2”。
                //BMAP_STATUS_UNKNOWN_ROUTE    导航结果未知。对应数值“3”。
                //BMAP_STATUS_INVALID_KEY    非法密钥。对应数值“4”。
                //BMAP_STATUS_INVALID_REQUEST    非法请求。对应数值“5”。
                //BMAP_STATUS_PERMISSION_DENIED    没有权限。对应数值“6”。(自 1.1 新增)
                //BMAP_STATUS_SERVICE_UNAVAILABLE    服务不可用。对应数值“7”。(自 1.1 新增)
                //BMAP_STATUS_TIMEOUT    超时。对应数值“8”。(自 1.1 新增)
                if(this.getStatus() === BMAP_STATUS_SUCCESS){
                    //精度为undefined 代表用户拒绝授权地理位置
                    if(r.accuracy === null){
                        reject({
                            type: '1', //授权失败
                            errorMessage: i18n.t('userRefuseRight'),
                        });
                    }
                    let myGeo = new BMap.Geocoder();
                    myGeo.getLocation(new BMap.Point(r.longitude, r.latitude), (result) => {
                        if(result){    
                            resolve({
                                longitude: r.longitude,
                                latitude: r.latitude,
                                address: result.address,
                            });
                        }else{
                            reject({
                                type: '2', //详细地址解析失败
                                errorMessage: i18n.t('addressResolveFail'),
                            });
                        }
                    });
                }else{
                    reject({
                        type: '0', //百度地图api调用出错
                        errorMessage: i18n.t('getPositionFail'),
                    });
                }
            }, function(err){
                //没有网络的返回值
                if(err.errorCode === 3){
                    reject({
                        type: '3', //超时，没有网络
                        errorMessage: i18n.t('positionOvertime'),
                    });
                }else{
                    reject({
                        type: '4', //未知的错误
                        errorMessage: 'unknown error',
                    });
                }
            });
        });
    }

getMap = () => {
        Webview.getCurrentPosition().then(action((position)=>{
            let map = new BMap.Map('container');
                let point = new BMap.Point(position.longitude, position.latitude);
                map.centerAndZoom(point, 17);
                this.getMovedArea(point, map);
            //向地图添加控件（anchor: 位置；type：类型）
            let top_right_navigation = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_ZOOM
            });
            map.addControl(top_right_navigation);

            map.addEventListener('dragend', ()=>{
                let center = map.getCenter();
                let Point = new BMap.Point(center.lng, center.lat);
                this.getMovedArea(Point, map);
            });
        }));
    }

    getMovedArea = (Point, map) => {
        // 创建地理编码实例
        let myGeo = new BMap.Geocoder();
        // 根据坐标得到地址描述
        myGeo.getLocation(Point, (result)=>{
            if (result){
                let surroundingAddress = _.map(result.surroundingPois, 'title');
                let options = {
                    onSearchComplete: (results)=>{
                        if (local.getStatus() === BMAP_STATUS_SUCCESS){
                            for (var i = 0; i < results.getCurrentNumPois(); i ++){
                                this.moveAddress.push({
                                    title: results.getPoi(i).title,
                                    address: results.getPoi(i).address,
                                    point: results.getPoi(i).point,
                                });
                            }
                        }
                    }
                };
                let local = new BMap.LocalSearch(map, options);
                local.searchNearby(surroundingAddress[0] || result.address, Point, 3000);
            }
        });
    }

效果二：
根据关键字搜索具体地址的功能，不需要在地图上显示。

解决思路：我们需要利用百度地图的关键字搜索功能，我们给input 框注册onChange事件，来实时获取用户输入的字符，将字符作为关键字传给search方法中。

//HTML中写一个输入框
<input type="text"
      placeholder={i18n.t('authorization.pleaseSearch')}
      value={store.searchAddressKey}
      onChange={store.handleChange} />

@action
handleChange = (e) => {
        this.searchAddressKey = e.target.value;
        let point = new BMap.Point(gpsMapStore.longitude, gpsMapStore.latitude);
        let options = {
            onSearchComplete: action((results)=>{
                this.searchedAddressList = [];
                if (local.getStatus() === BMAP_STATUS_SUCCESS){
                    for (var i = 0; i < results.getCurrentNumPois(); i ++){
                        this.searchedAddressList.push({
                            title: results.getPoi(i).title,
                            address: results.getPoi(i).address,
                            point: results.getPoi(i).point,
                        });
                    }
                    if(!this.searchAddressKey){
                        this.searchedAddressList = [];
                    }
                }
            })
        };
        let local = new BMap.LocalSearch(point, options);
        local.search(e.target.value);
    }