YZProjectCloud/yanzhu-ui-vue3/src/components/BaiduMap/Map.vue

<template>
   <el-dialog :title="title" v-model="show" width="800px" append-to-body 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 setup>
const show = ref(false);
const title = ref("");
const map = ref("");
const point = ref("");
const cityInfo = ref("");

const emit = defineEmits(["docom"]);

function getCity(data,cb){
    let myPoint = new BMapGL.Point(+data.longitude,+data.latitude);
    let myGeo = new BMapGL.Geocoder({extensions_town: true});      
    myGeo.getLocation(myPoint,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(myPoint,cityInfo);
    });
}

function doOk(){
    emit("docom",point.value,cityInfo.value);
    show.value=false;
}

function getAddress(){
    let addr=cityInfo.value?.address||'';
    return addr;
}

function showDlg(opt){    
    title.value=opt?.title||'选择地址';
    show.value=true;
    setTimeout(()=>{
      initMap(opt);
    },400);
}

function currentPoint(){
    let  geolocation = new BMapGL.Geolocation();
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(e=>{
        if(e.point){
            let point = e.point
            let initMarker = new BMapGL.Marker(point);
            map.value.centerAndZoom(point, 18);
            map.value.addOverlay(initMarker);
        }
    })
}

function mapClick(e){
    point.value=e.latlng;
    let myGeo = new BMapGL.Geocoder({extensions_town: true});      
    myGeo.getLocation(e.latlng,r=>{
        if(r){
            cityInfo.value={
                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{
            cityInfo.value={}
        }
    }); 
}

function initMap(opt) {   
    let imap = new BMapGL.Map("index-map");
    
    map.value = imap;
    let point = new BMapGL.Point(116.404, 39.915);
    //初始化地图，设置中心点坐标和地图级别
    map.value.centerAndZoom(point, 15);
    map.value.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
    map.value.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。
    
    //创建点坐标
    
    //创建标注
    let initMarker = new BMapGL.Marker(point);
    //向地图中添加单个覆盖物时会触发此事件
    map.value.addOverlay(initMarker);
    //开启标注拖拽功能
    //initMarker.enableDragging();
    //将标注点移动到中心位置            
    

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

/** 暴露组件 */
defineExpose({
  showDlg,
  initMapData
});
</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>