<<template>
   <el-dialog :title="title" v-if="show" :visible.sync="show" width="800px" append-to-body custom-class="baidu-map-dialog" 
   :close-on-click-modal="false" :close-on-press-escape="false" >
   <div class="div-info">
        <div>经纬度:{{point?(point.lng.toFixed(5)+","+point.lat.toFixed(5)):'' }}</div>
        <div>地址:{{ getAddress() }}</div>
        <div style="margin-top: 10px;text-align: center;" v-if="getAddress()">
            <el-button size="small" type="primary" @click="doOk">确定</el-button>
        </div>
    </div>
   <div id="index-map" style="width: 100%;height:600px;">
    
</div>
   </el-dialog>
</template>

<script>
export default {
    name: 'RuoyiUiMap',

    data() {
        return {
            show:false,
            title:'',
            map:null,
            point:null,
            cityInfo:''
        };
    },

    mounted() {
        
    },

    methods: {
        getCity(data,cb){
            let point = new BMapGL.Point(+data.longitude,+data.latitude);
            let myGeo = new BMapGL.Geocoder({extensions_town: true});      
            myGeo.getLocation(point,r=>{
                let cityInfo={
                        address:r.content?.address||'',
                        poi_desc:r.content?.poi_desc||'',
                        district:r.content?.address_detail?.district||'',
                        city:r.content?.address_detail?.city||'',
                        province:r.content?.address_detail?.province||''
                    }                
                cb && cb(point,cityInfo);
            });
        },
        doOk(){
            this.$emit("success",this.point,this.cityInfo);
            this.show=false;
        },
        getAddress(){
            let addr=this.cityInfo?.address||'';
            let poi_desc=this.cityInfo?.poi_desc||'';
            return addr+poi_desc;
        },
        showDialog(opt){
            this.title=opt?.title||'地图';
            this.show=true;
            setTimeout(()=>{
                this.initMap();
            },400);
        },
        currentPoint(){
            let  geolocation = new BMapGL.Geolocation();
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(e=>{
                if(e.point){
                    let point = e.point
                    let initMarker = new BMapGL.Marker(point);
                    this.map.centerAndZoom(point, 18);
                    this.map.addOverlay(initMarker);
                }
            })
        },
        mapClick(e){
            this.point=e.latlng;
            let myGeo = new BMapGL.Geocoder({extensions_town: true});      
            myGeo.getLocation(e.latlng,r=>{
                if(r){
                    this.cityInfo={
                        address:r.content?.address||'',
                        poi_desc:r.content?.poi_desc||'',
                        district:r.content?.address_detail?.district||'',
                        city:r.content?.address_detail?.city||'',
                        province:r.content?.address_detail?.province||''
                    }
                }else{
                    this.cityInfo={}
                }
            }); 
        },
        initMap() {            
            let map = new BMapGL.Map("index-map");
            this.map=map;
            let point = new BMapGL.Point(116.404, 39.915);
            //初始化地图，设置中心点坐标和地图级别
            map.centerAndZoom(point, 15);
            map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
            map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。
           
            //创建点坐标
           
            //创建标注
            let initMarker = new BMapGL.Marker(point);
            //向地图中添加单个覆盖物时会触发此事件
            map.addOverlay(initMarker);
            //开启标注拖拽功能
            //initMarker.enableDragging();
            //将标注点移动到中心位置            
          

            //添加地图默认控件
            map.addControl(new BMapGL.NavigationControl());
            //开启鼠标滚轮缩放
            map.addEventListener("click",this.mapClick);
            var myGeo = new BMapGL.Geocoder();
            // 将地址解析结果显示在地图上，并调整地图视野
            myGeo.getPoint('经河新城', function (point) {
                if (point) {
                    console.log("--->",point)
                    map.centerAndZoom(point, 16);
                    map.addOverlay(new BMapGL.Marker(point, { title: '经河新城' }))
                    map.enableScrollWheelZoom(true);
                    //map.setHeading(64.5);   //设置地图旋转角度
                    //map.setTilt(73);       //设置地图的倾斜角度
                } else {
                    alert('您选择的地址没有解析到结果！');
                }
            }, '陕西省')
            this.currentPoint();
        }
    },
};
</script>

<style lang="scss" >
.baidu-map-dialog{
    .el-dialog__body{
        position: relative;
        padding: 0px;
        .div-info{
            position: absolute;
            top:0px;
            right: 10px;
            width:300px;
            font-size: 12px;
            background: rgba(255,255,255,0.5);
            box-shadow: 6px 6px 6px rgba(0,0,0,0.2);
            z-index: 99999;
            padding: 8px;
            border:solid 1px #ccc;
            color: #51b5ff;
            line-height: 24px;
        }
    }
}
</style>