百度地图绘制区域

项目中自定义绘制区域。以下展示的逻辑是进入的时候先判断是否绘制，如果绘制的话展示展示绘制的区域，如果没有绘制则不展示，点击调整进行绘制。在页面中点击中心点可进行点位的选择。如果单独只需要绘制页面的话则只展示绘制的组件即可。具体情况根据实际需求来。

Ps：以下展示的时候除了地图的组件其余组件我没有展示，具体根据实际情况来

图片展示

页面代码

<template>
    <div class="appInner minWidth">
        <form-back></form-back>
        <base-cont height="100%" :isScrollbar="false">
            <template #head>
                <hy-header :importe="false" :exporte="false" :add="false" :deleted="false">绘制地图</hy-header>
            </template>
            <template #cont>
                <div >
                    <titleTwo title="基础信息"></titleTwo>
                    <disPlay>
                        <listOne paddingLeft="0px" name="商铺名称" :content="detailObj.name"></listOne>
                        <listOne name="是否绘制" :content="detailObj.border==''?'无':'是'"></listOne>
                        <listOne paddingRight="0px" name="中心点坐标" :content="centerPoint" @clickList="chooseCenter" ></listOne>
                        <!-- <listOne paddingRight="0px" name="中心点坐标" :content="centerPoint" v-if="centerPoint!=''"></listOne> -->
                    </disPlay>
                </div>
                <div id="adjustMap" class="adjustStyle" v-show="adjustShow"></div>
                <div class="mapUpCont" v-if="adjustShow">
                    <div class="areaBoundary">区域边界：</div>
                    <div class="adjustText" @click="adjustClick">调整</div>
                    <div class="attention">注：（这个按钮如果是在该区域初始设置边界时显示为“边界描画”，点击按钮时打开边界描画单独页面进行边界编辑。）</div>
                </div>
                <!--调整的地图样式-->
                <div v-if="!adjustShow" style="height:100%">
                    <twoMap @fatherMethod="fatherMethod" ref="childMap" :zoom="16" @areaStr="areaStr" :drawShow="drawShow" @cenPoint="cenPoint" :centerPointA="centerPoint"
                            @showInfo="showInfo"></twoMap>
                </div>
            </template>
        </base-cont>
    </div>
</template>

<script>
import { businessEdit,businessDetail } from "@/api/shop/business";
import titleTwo from '@/components/shopNew/title.vue';
import listOne from '@/components/shopNew/list.vue';
import disPlay from '@/components/shopNew/disPlay.vue';
import twoMap from "@/components/map/twoMap.vue";  //百度地图绘制
import { loadBMap } from '@/components/map/map'
export default {
    components: {titleTwo,listOne,disPlay,twoMap},
    name: "Drawarea",
    data() {
        return {
           detailId:'',
           adjustShow: true,
           detailObj:{},
           drawShow:1,   //控制地图
           map:null,
           centerPoint:''
        }
    },
    mounted() {

        this.initDetail()
    },
    created(){
        this.detailId = this.$route.query.id;
    },
    methods: {
        //获取详情
        initDetail(){
            let that=this;
            businessDetail({id:this.detailId}).then((res) => {
                if (res.code == 0) {
                    this.detailObj = res.data
                    that.centerPoint = res.data.centerPoint
                    that.$nextTick(() => {
                        loadBMap("ahwEn9BozQOKSBXhe02qQtCOABvFu2hr").then(() => {
                            that.initBdMap();
                        })
                    })
                    } else {
                    that.$global.tipMsg("error", res.msg);
                }
            });
        },
        fatherMethod(){
            this.adjustShow=true;
        },
        adjustClick(){
            this.adjustShow = false
            this.drawShow = 1
        },
        cenPoint(data){
            this.centerPoint = data
            var that = this
            businessEdit({id:this.detailId,centerPoint:data}).then(res=>{
                if(res.code==0){
                    // this.$router.go(-1)
                }else{
                    this.$global.tipMsg("error", res.msg);
                }
            }).catch()
        },
        showInfo(){},
        //初始化百度地图
        initBdMap() {
            // let that = this, point,dataArry = that.mapInfo.qyfw,lng=that.mapInfo.lng?that.mapInfo.lng:that.lng,lat=that.mapInfo.lat?that.mapInfo.lat:that.lat;
            let that = this, point,dataArry = [],lng=118.711996,lat=37.440117,areaText='';

            // dataArry = that.mapInfo.qyfw;
            // areaText=that.mapInfo.xzqhmc;
            // lng=that.mapInfo.lng?that.mapInfo.lng:that.lng;
            // lat=that.mapInfo.lat?that.mapInfo.lat:that.lat
            if(this.centerPoint!=''&&this.centerPoint!=null){
                point = new BMapGL.Point(Number(this.centerPoint.split(',')[0]),Number(this.centerPoint.split(',')[1]));
            }else{
                point = new BMapGL.Point(lng,lat);
            }
            let map = new window.BMapGL.Map("adjustMap", {minZoom: 8, maxZoom: 20});
            map.centerAndZoom(point, 17);
            map.enableScrollWheelZoom();
            that.map = map;
            // let data = ['118.51976258804292,37.46362231454992;118.51966966742341,37.46362030752442;118.5126119948686,37.4635633852732;118.50578196220437,37.46350666741641;118.50243341634838,37.46347931603796;118.50071405130792,37.463266797843126;118.49821928037335,37.462845583058055;118.49749654559295,37.46270786686607;118.49741069862871,37.462690651624214;118.4967568323376,37.46256509333601;118.4947761523476,37.46242266297765;118.49296832781255,37.46248598964462;118.49154007784081,37.462559337917035;118.4921123252345,37.46481487590791;118.49247897870924,37.466259144626505;118.49266314117591,37.46698978910871;118.4929020592522,37.46793621573783;118.49319760603301,37.46910881532505;118.4934022637281,37.46988098130984;118.49437885537064,37.473561906883155;118.4952208245506,37.47674260177564;118.49524859847092,37.47712355297055;118.49590262885015,37.47702151612416;118.497002000657,37.47696315088669;118.499002340287,37.47693405280593;118.49901077700488,37.4773761228356;118.49902026192478,37.477636878109735;118.4964153165129,37.47769059018724;118.49642935822662,37.477161938430534;118.49525968836049,37.477279395611525;118.49534030843844,37.47837331315741;118.49545485752482,37.48018198774976;118.49548056023684,37.480583168013595;118.49558888300677,37.48229441191025;118.49697879333662,37.48227163776523;118.49877731354246,37.48224262290168;118.49887460559394,37.48021564476548;118.50307080032492,37.48034877928592;118.503011822066,37.48124070445459;118.50465777056122,37.48131450671766;118.50470204249721,37.48108033628823;118.50684188618108,37.481260879746316;118.50795108385746,37.48138473224987;118.5073224349539,37.481971272241104;118.50630859452336,37.482849916314834;118.5059392046977,37.483171587523856;118.50531074117036,37.48374154806481;118.50484759985034,37.484039757914616;118.50390730540568,37.48464625515868;118.50214853296816,37.48550703948598;118.5003799371365,37.486151029499425;118.49869879171948,37.48669115200858;118.49787818456538,37.486963690003535;118.49731777336605,37.487148749653;118.49720368969317,37.48718636938981;118.49671032692656,37.487349040168525;118.49650644786354,37.492262732144326;118.49638787402337,37.495164462654174;118.49614456389223,37.50128849024818;118.49614158562588,37.503476881757635;118.49635535390807,37.50470511008044;118.49645414378702,37.50489947047468;118.50026568536336,37.50481420753341;118.50680266447766,37.5061479697292;118.50844097692209,37.50648863708024;118.50883657720061,37.50657054042945;118.50933108555586,37.50662340102038;118.5107297419315,37.50642290888926;118.51698939549863,37.50530104724106;118.5174410628811,37.50521680005725;118.51797967694876,37.505116499142396;118.52340354465184,37.505744163942296;118.52908664395507,37.506474844351885;118.52833721158481,37.5127361480789;118.528060024057,37.51408762798297;118.52769520301955,37.51454241426112;118.5276756415273,37.515133893861375;118.52744417538248,37.51708973828304;118.52751747671769,37.52008707427547;118.51903647589707,37.52004718850966;118.51893949293412,37.52291849866746;118.5163647436391,37.5229526835425;118.51703189543184,37.5235489345815;118.51907901079532,37.525375757333926;118.52284697854677,37.52873529112888;118.52657274188044,37.53204920635706;118.52795881507005,37.5335236047894;118.52873969432676,37.53439414840581;118.52934828921703,37.535531578427545;118.52959967867852,37.53627642943651;118.5302086240645,37.53629894107817;118.5300347053917,37.5358043378942;118.5296086408849,37.53460311004502;118.52845648057951,37.53282360819688;118.52843511295366,37.53275979734045;118.52840201009103,37.53274016628004;118.52811148414017,37.53229053708008;118.53062475372755,37.53179637190473;118.53069670501552,37.53057656422178;118.53554799320911,37.53057634363433;118.53600769797757,37.53052526274708;118.53621427365697,37.52866120510716;118.53741289482693,37.52876443491043;118.54097687106223,37.52955380872055;118.54110780672825,37.528265256806904;118.54389161379322,37.5274966084015;118.5445724951382,37.5264637882627;118.54426148592094,37.525097485876294;118.54452925314007,37.52289424496667;118.54314135361143,37.523261819562634;118.5408280419057,37.52442048208633;118.53685791459407,37.52367241888124;118.53703236938279,37.5224399806479;118.5380758181076,37.522521876684216;118.53833574313254,37.52132303064091;118.53859502382865,37.5201290740087;118.53873166189548,37.51949561187244;118.54016491206956,37.5194917451211;118.54023980270841,37.51861563774736;118.54021984322158,37.510386624070705;118.54125333276133,37.51059198156854;118.54127464566699,37.50993118074561;118.54471974827595,37.509770059793055;118.54596751130761,37.50861888480763;118.54622662550848,37.50858598367096;118.54622676084009,37.50882355365688;118.5464848952439,37.50882359695894;118.54652776520982,37.508553089565844;118.55281771638666,37.50972181069331;118.5527316261512,37.51067169212151;118.5581181757365,37.511431057854985;118.55613939475666,37.51267918975707;118.55614021306393,37.5136254309273;118.55717406080021,37.513593929868634;118.55725952921215,37.513290881395776;118.55868018363456,37.51295533130605;118.55885176597697,37.51204138057719;118.55958709204265,37.51180775199375;118.5621224015503,37.51099811562516;118.56216479867314,37.51045617302335;118.56319688731837,37.50750262094525;118.56082857407111,37.50749788488074;118.56057037196403,37.50770065807013;118.55264545330724,37.5077853625794;118.55256419164837,37.50178237308406;118.55255170409285,37.49737827608244;118.55384471382604,37.49738061828432;118.55712474159705,37.49532579819525;118.55739713338284,37.49153711815435;118.56652704968424,37.49127948468196;118.57455999033145,37.49123025407846;118.57877666663893,37.491201993225125;118.5817012265774,37.4911023301463;118.58453927051373,37.491035992450996;118.58737637678387,37.49110841219639;118.58691573179652,37.500460444454916;118.58747551461379,37.50018682828702;118.58786181341328,37.5001184458502;118.59013868278907,37.50008650048249;118.5908477260419,37.49331782921808;118.58762581291835,37.4930047091508;118.58814560907497,37.48318838314473;118.5764916593948,37.4834515649881;118.57628700836229,37.48171935484247;118.56617495848373,37.48197792110909;118.56614801496187,37.481245981654716;118.56399588883265,37.481242248421104;118.56364005794003,37.48332048282783;118.55812858436626,37.483169231256284;118.55769344038757,37.48386197069062;118.55261122614671,37.483850442326776;118.55256605140896,37.47677724385769;118.5524988254147,37.46806159398206;118.5524841457665,37.466241028056615;118.55247457419719,37.465134803836435;118.55612989558635,37.46506363625248;118.55940365958969,37.4651051861877;118.5594530466717,37.46375810437421;118.55227906046913,37.46372573921417;118.54322610047643,37.46368354021512;118.53685292676872,37.46365269547205;118.53688934683146,37.46505353092398;118.53499430309056,37.46506470753049;118.53496845194194,37.463759249717704;118.5348504636351,37.46375823738938;118.53242787054823,37.46373601332953;118.53203396267214,37.46373299449291;118.5317580314613,37.463730984292575;118.52936880970537,37.46370887793704;118.52667002113586,37.46368487700978;118.51976258804292,37.46362231454992']
            // that.getMap(dataArry,areaText);
            that.addMarker()


            // var mp = new BMapGL.Map(this.mapId,{minZoom: 1, maxZoom: 20});
            // mp.centerAndZoom(new BMapGL.Point(this.currentLat,this.currentLon), 17);
            // // this.map = new BMap.Map("mapCar",{minZoom: 11, maxZoom: 20}); //设置最大最小缩放级别
            // mp.enableScrollWheelZoom();
            // this.map = mp
            // this.addMarker()
        },
        //绘制区域描边
        addMarker() {
            let that = this
            //添加警务网格
            var policeGrid = this.detailObj.border.split(';'),newArr = []
            console.log('1111111',policeGrid)
            if(policeGrid.length>0){
                policeGrid.forEach(item=>{
                    newArr.push(new BMapGL.Point(Number(item.split(',')[0]),Number(item.split(',')[1])))
                })
                var gridPolice = new BMapGL.Polygon(newArr,{
                    strokeColor:"#4BADF8",
                    strokeWeight:2,
                    strokeOpacity:1,
                    strokeStyle:'dashed',
                    fillColor:'#4BADF8',
                    fillOpacity:0.3
                })
                this.map.addOverlay(gridPolice);
                // var opts = {
                //     position: new BMapGL.Point(Number(policeGrid[0].split(',')[0]),Number(policeGrid[0].split(',')[1])), // 指定文本标注所在的地理位置
                //     offset: new BMapGL.Size(30, 35) // 设置文本偏移量
                // };
                // var label = new BMapGL.Label(this.detailObj.policeCommand, opts);
                // // 自定义文本标注样式
                // label.setStyle({
                //     color: '#232323',
                //     borderRadius: '0px',
                //     borderColor: 'rgba(0,0,0,0)',
                //     background:'rgba(255,255,255,0)',
                //     fontSize: '16px',
                //     // fontWeight:'bold',
                //     fontFamily: '微软雅黑'
                // });
                // this.map.addOverlay(label);
            }
        },
        //修改
        areaStr(data){
            var that = this
            businessEdit({id:this.detailId,border:data}).then(res=>{
                if(res.code==0){
                    this.$router.go(-1)
                }else{
                    this.$global.tipMsg("error", res.msg);
                }
            }).catch()
        },
        //选择商铺中心坐标点位
        chooseCenter(){
            this.drawShow = 2
            this.adjustShow = false
        },
    },
};
</script>

<style  lang="scss">
.minWidth {
    min-width: 1055px;
    height: 100%;
    position: relative;
    .mapUpCont{
        height: 50px;
        background: rgba(255,255,255,0.95);
        box-shadow: 0px 2px 10px 0px rgba(10,30,52,0.11);
        position: absolute;
        bottom: 100px;
        left: 2%;
        width: 96%;
        z-index: 120;
        display: flex;
        line-height: 50px;
      .areaBoundary{
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .adjustText{
        width: 108px;
        height: 50px;
        background: #08ABFF;
        box-shadow: 0px 2px 35px 0px rgba(0,77,164,0.56);
        border-radius: 6px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        cursor: pointer;
      }
      .attention{
        padding-left: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
}
.adjustStyle{
    width: 100%;
    height: calc(100% - 125px);
    margin-top: 20px;
}
</style>

绘制百度地图的组件代码

<template>
  <div class="drawArea">
    <!--是否绘制-->
    <div>
      <el-form :inline="true" :model="formInline" class="form_select" style="margin-top: 10px;padding-left: 15px">
        <!--拾取点位-->
        <div v-if="drawShow==2" class="pointFlex">
          <el-form-item label="关键字：" class="pointText">
            <el-input
              type="text"
              style="width: 300px"
              v-model="formInline.point"
              placeholder="请输入搜索内容"
            ></el-input>
          </el-form-item>
          <div class="sureBtn" @click="searchMap">确定 </div>
        </div>
        <!--是否绘制-->
        <div v-if="drawShow==1" style="height:50px">
          <el-form-item label="是否绘制：" class="labelItem" style="z-index: 30 !important;margin-bottom: 0 !important;">
            <el-radio v-model="radioType" v-for="(radio,index) in radioData" :key="index" :label="radio.id" text-color="#ff0000"
                      @change="changeForm(radio)" style="color: #ffffff !important;">{{radio.label}}</el-radio>
          </el-form-item>
        </div>
        <!--返回-->
         <div v-if="isBackShow"
           class="return"
           @click="handelBack">
           <!--  -->
           <!-- <img src="@/assets/images/homeInfo/return.png" alt="" /> -->
           <span>返回</span>
         </div>
      </el-form >
    </div>
    <!--标记中心点位-->
    <!--地图-->
    <div id="mapArea" style="width: 100%;padding: 12px;overflow: hidden;margin:20px 0px; height:100%"></div>
    <!--绘制完成后==》 弹窗-->
    <increasePop
      :centerDialogVisible.sync="tipsAlert"
      :title="title"
      :ruleForm="ruleForm"
      @resertClick="resertDetail"
      @sureClick="sureClick"
    >
      <form-textarea :value.sync="ruleForm.areaStr" label="边界数据" preFixIcon="" placeholder="请输入边界数据"></form-textarea>
    </increasePop>
  </div>
</template>

<script>
  import { loadBaiDuDrawMap } from './map'
  import increasePop from '@/components/form/increasePop.vue';
  export default {
        name: "twoMap",
      components: {
        increasePop
      },
      props: {
        zoom: {
          type: Number,
          default: 15
        },
        drawShow: {
          type: Number,
          default: 1
        },
        centerPointA:{
          type:String,
          default:""
        },
        isBackShow:{
          type:Boolean,
          default:true
        }
      },
      data() {
        return {
          initMap: null,
          pointList: [],
          // lng:117.330325,
          // lat:34.816735,
          lng: 118.70987514688926,
          lat: 37.44037689242104,
          outLineData: [],
          placeName:'',
          // 是否绘制
          radioType:'0',
          radioData:[],
          formInline:{
            point:'',
          },
          jkData:[],  //绘制完成后==》区域轮廓的数据
          overlays:[],
          tipsAlert:false,  //绘制完成后的弹窗展示
          title:'绘制信息',
          ruleForm:{
            areaStr:'',
          },
          //拾取到的==》经纬度的数组
          centerDian:[],
          centerPoint:''
        }
      },
      created() {
        let that = this, path = [], str = '';
        that.radioData=[
          {label:'是',id:'1'},{label:'否',id:'0'}
        ];
      },
      methods: {
          // 返回
        handelBack(){
          this.$emit('fatherMethod')
        },
        //初始化百度地图
        initBDMap() {
          let that = this, level = this.zoom, point, outLineData = that.outLineData, dataArry = [], bdOneStr = '';
          // that.mapLoading=true;
          loadBaiDuDrawMap().then((BMapGL=>{
            if(that.centerPointA!=''&&that.centerPointA!=null){
              // console.log('1111111111222',that.centerPointA)
                point = new BMapGL.Point(Number(that.centerPointA.split(',')[0]),Number(this.centerPointA.split(',')[1]));
            }else{
                point = new BMapGL.Point(118.70987514688926,37.44037689242104);
            }
            let map = new window.BMapGL.Map("mapArea", {minZoom: 8, maxZoom: 20});
            map.centerAndZoom(point, level);
            map.enableScrollWheelZoom();
            // map.setMapStyleV2({styleJson: styleJson});
            that.initMap = map;
            // let data = ['118.51976258804292,37.46362231454992;118.51966966742341,37.46362030752442;118.5126119948686,37.4635633852732;118.50578196220437,37.46350666741641;118.50243341634838,37.46347931603796;118.50071405130792,37.463266797843126;118.49821928037335,37.462845583058055;118.49749654559295,37.46270786686607;118.49741069862871,37.462690651624214;118.4967568323376,37.46256509333601;118.4947761523476,37.46242266297765;118.49296832781255,37.46248598964462;118.49154007784081,37.462559337917035;118.4921123252345,37.46481487590791;118.49247897870924,37.466259144626505;118.49266314117591,37.46698978910871;118.4929020592522,37.46793621573783;118.49319760603301,37.46910881532505;118.4934022637281,37.46988098130984;118.49437885537064,37.473561906883155;118.4952208245506,37.47674260177564;118.49524859847092,37.47712355297055;118.49590262885015,37.47702151612416;118.497002000657,37.47696315088669;118.499002340287,37.47693405280593;118.49901077700488,37.4773761228356;118.49902026192478,37.477636878109735;118.4964153165129,37.47769059018724;118.49642935822662,37.477161938430534;118.49525968836049,37.477279395611525;118.49534030843844,37.47837331315741;118.49545485752482,37.48018198774976;118.49548056023684,37.480583168013595;118.49558888300677,37.48229441191025;118.49697879333662,37.48227163776523;118.49877731354246,37.48224262290168;118.49887460559394,37.48021564476548;118.50307080032492,37.48034877928592;118.503011822066,37.48124070445459;118.50465777056122,37.48131450671766;118.50470204249721,37.48108033628823;118.50684188618108,37.481260879746316;118.50795108385746,37.48138473224987;118.5073224349539,37.481971272241104;118.50630859452336,37.482849916314834;118.5059392046977,37.483171587523856;118.50531074117036,37.48374154806481;118.50484759985034,37.484039757914616;118.50390730540568,37.48464625515868;118.50214853296816,37.48550703948598;118.5003799371365,37.486151029499425;118.49869879171948,37.48669115200858;118.49787818456538,37.486963690003535;118.49731777336605,37.487148749653;118.49720368969317,37.48718636938981;118.49671032692656,37.487349040168525;118.49650644786354,37.492262732144326;118.49638787402337,37.495164462654174;118.49614456389223,37.50128849024818;118.49614158562588,37.503476881757635;118.49635535390807,37.50470511008044;118.49645414378702,37.50489947047468;118.50026568536336,37.50481420753341;118.50680266447766,37.5061479697292;118.50844097692209,37.50648863708024;118.50883657720061,37.50657054042945;118.50933108555586,37.50662340102038;118.5107297419315,37.50642290888926;118.51698939549863,37.50530104724106;118.5174410628811,37.50521680005725;118.51797967694876,37.505116499142396;118.52340354465184,37.505744163942296;118.52908664395507,37.506474844351885;118.52833721158481,37.5127361480789;118.528060024057,37.51408762798297;118.52769520301955,37.51454241426112;118.5276756415273,37.515133893861375;118.52744417538248,37.51708973828304;118.52751747671769,37.52008707427547;118.51903647589707,37.52004718850966;118.51893949293412,37.52291849866746;118.5163647436391,37.5229526835425;118.51703189543184,37.5235489345815;118.51907901079532,37.525375757333926;118.52284697854677,37.52873529112888;118.52657274188044,37.53204920635706;118.52795881507005,37.5335236047894;118.52873969432676,37.53439414840581;118.52934828921703,37.535531578427545;118.52959967867852,37.53627642943651;118.5302086240645,37.53629894107817;118.5300347053917,37.5358043378942;118.5296086408849,37.53460311004502;118.52845648057951,37.53282360819688;118.52843511295366,37.53275979734045;118.52840201009103,37.53274016628004;118.52811148414017,37.53229053708008;118.53062475372755,37.53179637190473;118.53069670501552,37.53057656422178;118.53554799320911,37.53057634363433;118.53600769797757,37.53052526274708;118.53621427365697,37.52866120510716;118.53741289482693,37.52876443491043;118.54097687106223,37.52955380872055;118.54110780672825,37.528265256806904;118.54389161379322,37.5274966084015;118.5445724951382,37.5264637882627;118.54426148592094,37.525097485876294;118.54452925314007,37.52289424496667;118.54314135361143,37.523261819562634;118.5408280419057,37.52442048208633;118.53685791459407,37.52367241888124;118.53703236938279,37.5224399806479;118.5380758181076,37.522521876684216;118.53833574313254,37.52132303064091;118.53859502382865,37.5201290740087;118.53873166189548,37.51949561187244;118.54016491206956,37.5194917451211;118.54023980270841,37.51861563774736;118.54021984322158,37.510386624070705;118.54125333276133,37.51059198156854;118.54127464566699,37.50993118074561;118.54471974827595,37.509770059793055;118.54596751130761,37.50861888480763;118.54622662550848,37.50858598367096;118.54622676084009,37.50882355365688;118.5464848952439,37.50882359695894;118.54652776520982,37.508553089565844;118.55281771638666,37.50972181069331;118.5527316261512,37.51067169212151;118.5581181757365,37.511431057854985;118.55613939475666,37.51267918975707;118.55614021306393,37.5136254309273;118.55717406080021,37.513593929868634;118.55725952921215,37.513290881395776;118.55868018363456,37.51295533130605;118.55885176597697,37.51204138057719;118.55958709204265,37.51180775199375;118.5621224015503,37.51099811562516;118.56216479867314,37.51045617302335;118.56319688731837,37.50750262094525;118.56082857407111,37.50749788488074;118.56057037196403,37.50770065807013;118.55264545330724,37.5077853625794;118.55256419164837,37.50178237308406;118.55255170409285,37.49737827608244;118.55384471382604,37.49738061828432;118.55712474159705,37.49532579819525;118.55739713338284,37.49153711815435;118.56652704968424,37.49127948468196;118.57455999033145,37.49123025407846;118.57877666663893,37.491201993225125;118.5817012265774,37.4911023301463;118.58453927051373,37.491035992450996;118.58737637678387,37.49110841219639;118.58691573179652,37.500460444454916;118.58747551461379,37.50018682828702;118.58786181341328,37.5001184458502;118.59013868278907,37.50008650048249;118.5908477260419,37.49331782921808;118.58762581291835,37.4930047091508;118.58814560907497,37.48318838314473;118.5764916593948,37.4834515649881;118.57628700836229,37.48171935484247;118.56617495848373,37.48197792110909;118.56614801496187,37.481245981654716;118.56399588883265,37.481242248421104;118.56364005794003,37.48332048282783;118.55812858436626,37.483169231256284;118.55769344038757,37.48386197069062;118.55261122614671,37.483850442326776;118.55256605140896,37.47677724385769;118.5524988254147,37.46806159398206;118.5524841457665,37.466241028056615;118.55247457419719,37.465134803836435;118.55612989558635,37.46506363625248;118.55940365958969,37.4651051861877;118.5594530466717,37.46375810437421;118.55227906046913,37.46372573921417;118.54322610047643,37.46368354021512;118.53685292676872,37.46365269547205;118.53688934683146,37.46505353092398;118.53499430309056,37.46506470753049;118.53496845194194,37.463759249717704;118.5348504636351,37.46375823738938;118.53242787054823,37.46373601332953;118.53203396267214,37.46373299449291;118.5317580314613,37.463730984292575;118.52936880970537,37.46370887793704;118.52667002113586,37.46368487700978;118.51976258804292,37.46362231454992']
            // that.getMap(dataArry,that.streetText)
            // let pointList = that.pointList
            //画点
            // for (let i = 0; i < pointList.length; i++) {
            //   let item = pointList[i];
            //   let lng, lat;
            //   lng = item.lng;
            //   lat = item.lat;
            //   // 社区的中心点位
            //   let pointIcon = new BMapGL.Point(lng, lat);
            //   // 延伸出去的点位
            //   let pointLong = new BMapGL.Point(lng, lat);
            //   // if (item.manage_type == 1) {
            //   //   //物业管理
            //   //   item.img = require("../../../assets/indexNormal/mapIconWu.png");
            //   //   // item.img =  pointImg
            //   // } else if (item.manage_type == 2) {
            //   //   //业委会管理
            //   //   item.img = require("../../../assets/indexNormal/mapIconYe.png");
            //   // } else if (item.manage_type == 3) {
            //   //   //社区托管
            //   //   item.img = require("../../../assets/indexNormal/mapIconOther.png");
            //   // } else if (item.manage_type == 4) {
            //   //   //镇街托管
            //   //   item.img = require("../../../assets/indexNormal/mapIconJie.png");
            //   // }
            //   // todo  地图点位隐藏
            //   // that.getMapLable(item, map, pointIcon, pointLong);
            // }

            // //点击获取地图的经纬度
            let arry=[];
            // if(that.drawShow == 2){
              that.initMap.addEventListener('click', function (e) {
                  let center = e.latlng.lng+','+e.latlng.lat;
                  if(that.drawShow == 2){
                    that.centerPoint = center
                    that.$emit('cenPoint',center)
                    console.log('111111111111',e)
                  }
                // that.formInline.point = center;
                // that.lat=e.latlng.lat;          //维度
                // that.lng=e.latlng.lng;          //经度
              //   that.centerDian=arry;
              //   arry.push(e.latlng.lng+','+ e.latlng.lat);
              //   that.centerDian=arry;
              });
            // }

          }))
        },
        //绘制区域描边
        getMap(data, e) {
          let that = this;
          let map = this.initMap
          var bd = new BMapGL.Boundary();
          bd.get(e, function (rs) {
            // var hole = new BMapGL.Polygon(rs.boundaries, {
            var hole = new BMapGL.Polygon(data, {
              strokeWeight: 2,
              // strokeOpacity: 0.6,
              strokeColor: "#4ff9fc",
              strokeStyle: "border",
              fillColor: "#0070AE",
              fillOpacity: 0.6,
            });
            map.addOverlay(hole);
          });
        },
        // 搜索事件
        searchMap(){
          let that=this;
          // this.map.clearOverlays();//清除图层覆盖物
          // document.getElementById("keyword").value="";//清除搜索框结构
          var local = new BMapGL.LocalSearch(that.initMap, {
            renderOptions:{map: that.initMap}
          });
          local.search(this.formInline.point)
        },
        // 清空
        cleanMap(){
          this.jkData=[];
          this.map.clearOverlays();//清除图层覆盖物
          // 画完轨迹的 两个图标的清除
          $('#confirmOperate').css('display','none');
          $('#cancelOperate').css('display','none')
        },
        // 绘制轮廓
        draw(type) {
          // this.actNav = type;
          var overlays = [],that = this;
          //回调获得覆盖物信息
          var overlaycomplete = function(e){
            overlays.push(e.overlay);
            that.overlays = overlays;
            let result = "";
            result = "<p>";
            if (e.drawingMode == 'polyline') {
              result += ' 所画的点个数：' + e.overlay.getPath().length;
            }
            result += "</p>";
            // $("showOverlayInfo").style.display = "none";
            $("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板
            let linelnglatArr=[],newArr = [];
            for(let i = 0; i < overlays.length; i++){//循环连线个数
              for(let j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                let object = new Object();
                object.lng = overlays[i].getPath()[j].lng;
                object.lat = overlays[i].getPath()[j].lat;
                let arrTwo = [overlays[i].getPath()[j].lng,overlays[i].getPath()[j].lat];
                linelnglatArr.push(object);
                newArr.push(arrTwo);
              }
            }
            let str = '';
            for(let i =0;i<newArr.length;i++){
              str+=newArr[i][0]+','+newArr[i][1]+';'
            }
            that.jkData = [str.slice(0,str.length-1)];
            that.ruleForm.areaStr=that.jkData.toString();
            // that.jkData=newArr;
            that.tipsAlert=true;
            let arrOne = [newArr];
            // that.$global.mapDrawArr = linelnglatArr;
            // window.sessionStorage.setItem('mapDrawArr',JSON.stringify(linelnglatArr))
          };
          const styleOptions = {
            strokeColor: "#ff0000", // 边线颜色
            fillColor: "red", // 填充颜色。当参数为空时，圆形没有填充颜色
            strokeWeight: 3, // 边线宽度，以像素为单位
            strokeOpacity: 0.8, // 边线透明度，取值范围0-1
            fillOpacity: 0.6, // 填充透明度，取值范围0-1
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          };
          let labelOptions = {
            borderRadius: '2px',
            background: '#FFFBCC',
            border: '1px solid #E1E1E1',
            color: '#703A04',
            fontSize: '12px',
            letterSpacing: '0',
            padding: '5px'
          };
          // 实例化鼠标绘制工具
          that.drawingManager = new BMapGLLib.DrawingManager(that.initMap, {
            // isOpen: true,        // 是否开启绘制模式
            enableCalculate: false, // 绘制是否进行测距测面
            enableSorption: true, // 是否开启边界吸附功能
            sorptiondistance: 20, // 边界吸附距离
            polylineOptions: styleOptions, // 线的样式
            labelOptions: labelOptions,      // label样式
          });
          if (that.drawingManager.isOpen_ && that.drawingManager.getDrawingMode() === type) {
            that.drawingManager.close();
          } else {
            that.drawingManager.setDrawingMode(type);
            that.drawingManager.open();
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            that.drawingManager.addEventListener('overlaycomplete', overlaycomplete);
          }
        },
        // 是否绘制
        changeForm(it){
          if(it.id==1){
            this.draw('polyline')
          }
        },
        // 绘制完成后的弹窗
        resertDetail(){
          let that=this;
          that.tipsAlert=false;
        },
        sureClickPoint(){
          let that=this;
          let dataParams = {
            lat: that.lat,
            lng: that.lng,
            fw:that.jkData,
          };
          console.log(dataParams)
        },
        // 确定
        sureClick(){
          let that=this;
          let dataParams = {
            lat: that.lat,
            lng: that.lng,
            fw:that.jkData,
          };
          // this.$router.push("/employee/employeeDetail" );
          // this.$router.go(-1)
          this.$global.areaMap = this.ruleForm.areaStr
          // console.log(this.jkDatam,'===')
          this.tipsAlert = false
          this.$emit('areaStr',this.ruleForm.areaStr)
          // if(that.level) {
          //   // areaAdd(dataParams).then((res) => {
          //   //   if (res.success == true) {
          //   //     that.$global.tipMsg("success", res.message);
          //   //     that.tipsAlert = false;
          //   //     that.cleanMap();
          //   //   } else {
          //   //     that.$global.tipMsg("error", res.message);
          //   //   }
          //   // });
          // }else{
          //   that.$global.tipMsg("warning", '请选择左侧区域');
          // }
        },

      },
      mounted(){
          this.initBDMap()
      },
      watch:{
        initMap: function(res) {
          this.searchMap();
        },
        centerPointA:{
          handler(){
            this.initBDMap();
          },
          immediate:true
        } ,
        // drawShow:function(res) {
        //   this.drawShow=res;
        // },
      },
    }
</script>
<style>

</style>
<style lang="scss" scoped>
  .drawBox{
    // height: 641px !important;
    // height: calc(100% - 150px) !important;
  }
  .otherBox{
    // height: 618px !important;
  }
  .drawArea{
    // border: 1px solid #0075DA;
    position: relative;
    height: 100%;
    // background: red;
    display: block;
    padding-bottom: 20px;
    box-sizing: border-box;

  }
  .labelItem {

    ::v-deep .el-form-item__label{
      color: #ffffff !important;
    }
    ::v-deep .is-checked .el-radio__label{
      color: #53C9FC ;
    }
  }
  /*拾取点位*/
  .pointText{
    ::v-deep .el-form-item__label {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    ::v-deep .el-input__inner {
      background: rgba(33, 88, 190, 0.57) !important;
      border-radius: 0 !important;
      border: 1px solid #0a57a6 !important;
      color: #ffffff !important;
      height: 32px !important;
      font-size: 12px;
    }
  }
  /*返回*/
  .return {
    width: 95px;
    height: 34px;
    background: #53C9FC;
    border-radius: 0px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 34px;
    position: absolute;
    right: 0px;
    top: 8px;
    text-align: center;
    // top:0px;
    // right: 20px;
    // z-index: 1;
    cursor: pointer;
    img {
      width: 21px;
      height: 17px;
      background-size: 100% 100%;
      margin: 7px 8px 0 18px;
    }
  }
  /*确定*/
  .pointFlex{
    display: -webkit-flex;
    .sureBtn{
      width: 90px;
      height: 32px;
      background: #336EFF;
      border-radius: 4px;
      font-size: 16px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;
      line-height: 32px;
      text-align: center;
      margin-top: 3px;
      cursor: pointer;
    }
  }

</style>