vue項目-百度地圖-初始化展示覆蓋范圍（默認中心點和半徑），點擊切換中心點，地圖落點（帶數字）

vue項目中，百度地圖初始化需要有一個中心點和半徑，展示覆蓋范圍，點擊切換中心點，半徑不變，切換半徑

地圖落點展示公司地址，落點帶數字標注

 

 

 

 

<!--
 * @LastEditors: 胡沖
 * @LastEditTime: 2021-6-1 15:47:42
 * @Description: 智慧地圖頁面
-->
<template>
  <div v-loading="loading" class="smart-content">
    <div class="smart-content-map" id="map"></div>
    <div class="smart-content-select-div">
      <div class="smart-content-select-div-header">
        當前
        <span style="color: red;">{{valueRange}}km</span>范圍內共
        <span style="color: red;">{{headNum}}家</span>企業
      </div>

      <div class="smart-content-select-div-select">
        <div class="smart-content-select-div-select-span">類型</div>
        <div class="smart-content-select-div-select-div">
          <el-select v-model="value" @change="changeValue1" clearable placeholder="請選擇">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <div
          class="smart-content-select-div-select-span smart-content-select-div-select-span-right"
        >標簽</div>
        <div class="smart-content-select-div-select-div">
          <el-cascader
            v-model="value1"
            :options="options2"
            :props="{ expandTrigger: 'hover' }"
            @change="changeValue2"></el-cascader>
        </div>
      </div>

      <div class="smart-content-select-div-slider">
        <span class="smart-content-select-div-slider-span">范圍</span>
        <div class="smart-content-select-div-slider-div">
          <el-slider v-model="valueRange" @change="changeRange" :step="5" :max="100"></el-slider>
        </div>
      </div>

      <div class="smart-content-select-div-radio">
        <span class="smart-content-select-div-radio-span">注冊成本</span>
        <div style="display:inline-block;">
          <el-radio-group v-model="radio1" @change="changeRadio1">
            <div>
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">100萬以下</el-radio-button>
              <el-radio-button label="2">100-1000萬</el-radio-button>
            </div>
            <div>
              <el-radio-button label="3">1000萬-5000萬</el-radio-button>
              <el-radio-button label="4">5000萬-1億</el-radio-button>
              <el-radio-button label="5">1億以上</el-radio-button>
            </div>
          </el-radio-group>
        </div>
      </div>

      <div class="smart-content-select-div-radio">
        <span class="smart-content-select-div-radio-span">成立年限</span>
        <div style="display:inline-block;">
          <el-radio-group v-model="radio2" @change="changeRadio2">
            <div>
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">0-3年</el-radio-button>
              <el-radio-button label="2">3-5年</el-radio-button>
            </div>
            <div>
              <el-radio-button label="3">5-10年</el-radio-button>
              <el-radio-button label="4">10年以上</el-radio-button>
            </div>
          </el-radio-group>
        </div>
      </div>

      <div class="smart-content-select-div-radio">
        <span class="smart-content-select-div-radio-span">參保人數</span>
        <div style="display:inline-block;">
          <el-radio-group v-model="radio3" @change="changeRadio3">
            <div>
              <el-radio-button label="0">50以下</el-radio-button>
              <el-radio-button label="1">50-100人</el-radio-button>
              <el-radio-button label="2">100-500人</el-radio-button>
            </div>
            <div>
              <el-radio-button label="3">500-1000人</el-radio-button>
              <el-radio-button label="4">1000人以上</el-radio-button>
            </div>
          </el-radio-group>
        </div>
      </div>

      <div class="smart-content-select-div-msg-header">
        <span style="margin-left:20px;">序號</span>
        <span style="margin-left:20px;">名稱</span>
        <span style="margin-left:135px;">注冊資本</span>
        <span style="margin-left:30px;">成立時間</span>
      </div>

      <div v-if="smartMapCompanyMsg.length != 0">
        <div
          class="smart-content-select-div-msg-body"
          v-for="(item,key) in smartMapCompanyMsg"
          :key="key"
        >
          <div class="smart-content-select-div-msg-body-id">{{key+1}}</div>
          <div class="smart-content-select-div-msg-body-company" @click="clickCompany(item.id)" :title="item.company">{{item.company}}</div>
          <div class="smart-content-select-div-msg-body-money" :title="item.money">{{item.money}}</div>
          <div class="smart-content-select-div-msg-body-date">{{item.date}}</div>
        </div>
      </div>
      <div v-else style="text-align:center;width:100%;">
        <span style="color:#409EFF;font-size:14px;">暫無數據</span>
      </div>

    </div>
  </div>
</template>

<script>
import '@/assets/css/outToCss/smartMap-index.css'
import {postSmartMapMsg} from '@/api/smartMap'
import { optionMapTab} from '@/assets/js/smartMap'
export default {
  data(){
    return{
      //防止頁面數據過多 加個蒙層增加用戶效果
      loading:true,
      //結果范圍數
      headRange:"xxx",
      //結果公司數量
      headNum:0,
      //類型下拉框
      options: [{
          value: '激光',
          label: '激光'
        }],
      //標簽下拉框數據
      options2:optionMapTab,
      // 類型下拉框綁定值
      value: '',
      // 標簽下拉框綁定值
      value1:['上游','電感'],
      //標簽下拉框拼接值（接口）
      labelvalue:"上游-電感",
      //范圍綁定值
      valueRange:20,
      //注冊成本綁定值
      radio1: '0',
      //成立年限綁定值
      radio2: '0',
      //參保人數綁定值
      radio3: '0',
      //公司數據
      smartMapCompanyMsg:[],
       // 中心點經度
      centerPointLog: 121.47, 
      // centerPointLog: 120, 
      //中心點緯度
      centerPointLat: 31.23,
      // centerPointLat: 20,
      //地圖實例
      map:null,
      //圓圈實例
      circle:null
    }
  },
  methods:{
    //初始化頁面數據
    initMapMsg(){
      this.smartMapCompanyMsg = []
      postSmartMapMsg(this.centerPointLog,this.centerPointLat,this.value,this.labelvalue,this.valueRange,parseInt(this.radio1),parseInt(this.radio2),parseInt(this.radio3)).then(res=>{
      // postSmartMapMsg(120,20,'','上游-電感',1000,1,0,1).then(res=>{
        console.log(res)
        this.loading = false
        this.headNum = res.data.count
        this.smartMapCompanyMsg = res.data.data.map(item=>{
          return{
            id:item.id,
            company:item.Name,
            money:item.Fund,
            date:item.Date,
            rating:item.Rating,
            latitude:item.latitude,
            longitude:item.longitude,
          }
        })
        // 地圖落點功能
        for(let i = 0;i<this.smartMapCompanyMsg.length;i++){
          let marker = new BMapGL.Marker(new BMapGL.Point(this.smartMapCompanyMsg[i].longitude,this.smartMapCompanyMsg[i].latitude));
          this.map.addOverlay(marker);
          // 在點標記上添加數字（根據需求設置對應信息）
          let label = new BMapGL.Label(i+1, {
          //調整數字跟點標記的位置關系
            offset: new BMapGL.Size(-5, -20),
          });
          label.setStyle({
            background: "none",
            color: "#fff",
            border: "none", 
          });
          //對label的樣式進行設置
          marker.setLabel(label); 
        }

      }).catch(err=>{
        console.log(err)
        this.loading = false
        this.$message.error("服務器錯誤")
      })
      
    },
    //更改類型下拉值
    changeValue1(){
      this.loading = true;
      this.mapMsgInit();
      this.initMapMsg();
    },
    //更改標簽下拉值
    changeValue2(value){
      // console.log(value)
      this.loading = true;
      this.labelvalue = value[0] + '-' + value[1]
      this.mapMsgInit();
      this.initMapMsg();
    },
    //更改范圍值
    changeRange(value){
      this.valueRange = value;
      this.loading = true;
      this.initMapMsg();
      this.mapMsgInit();
    },
    //更改注冊成本
    changeRadio1(value){
      this.loading = true;
      this.mapMsgInit();
      this.initMapMsg();
    },
    //更改成立年限
    changeRadio2(value){
      this.loading = true;
      this.mapMsgInit();
      this.initMapMsg();
    },
    //更改參保人數
    changeRadio3(value){
      this.loading = true;
      this.mapMsgInit();
      this.initMapMsg();
    },
    //地圖畫圈渲染
    mapMsgInit(){
        // 創建Map實例,GL版命名空間為BMapGL(鼠標右鍵控制傾斜角度)
        this.map = new BMapGL.Map("map", {enableMapClick:false}); 
        // 初始化地圖,設置中心點坐標和地圖級別
        this.map.centerAndZoom(new BMapGL.Point(this.centerPointLog,this.centerPointLat), 11);      
        //地圖可縮放
        this.map.enableScrollWheelZoom(true);
          

        //地圖畫圈
        this.circle = new BMapGL.Circle(new BMapGL.Point(this.centerPointLog,this.centerPointLat),
          this.valueRange*1000,{
            fillColor: '#5E87DB', 
            strokeColor:"#5E87DB", 
            strokeWeight:2, 
            strokeOpacity:0.2
          });
          this.map.addOverlay(this.circle); 
        //清除圓圈 
        // this.map.clearOverlays();
        

        //點擊地圖更改圓圈位置
        var _this =this;
        this.map.addEventListener('click', function (e) {
            _this.centerPointLog = e.latlng.lng;
            _this.centerPointLat = e.latlng.lat;
            _this.loading = true;
            _this.mapMsgInit();
            _this.initMapMsg();
        });

    },
    //點擊企業名稱跳轉
    clickCompany(val){
      // console.log(val)
      this.$router.push({path:'/enterprise/enterprise',query:{id:val}})
    }
  },
  mounted(){
    this.mapMsgInit();
    this.initMapMsg();
  }
}
</script>