引包不用我多说了把

官方文档

Vue Baidu Map (dafrok.github.io)icon-default.png?t=M4ADhttps://dafrok.github.io/vue-baidu-map/#/zh/index

npm

$ npm install vue-baidu-map --save

引入

<script src="https://unpkg.com/vue-baidu-map"></script>

上代码

以下代码仅供参考,如有不足可以指出,谢谢

 <baidu-map ak="你的ak码"
                   :zoom="zoom"
                   :center="center"
                   style="height: 100vh;width: 100%;touch-action: pan-y"
                   :scroll-wheel-zoom="true"
                   :pinch-to-zoom="true"
                   :auto-resize="true"
                   :keyboard="true"
                   :min-zoom="9"
                   @zoomend="zoomEnd"
                   @ready="setDistanceToolInstance">
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-boundary :name="STNM"
                       :stroke-weight="2"
                       :stroke-opacity="1"
                       :fill-opacity="0.000000000000000000000000001"
                       stroke-color="blue" />
          <template v-for="item,key in points">
            <bm-marker v-if="STNM ==='邢台市'?true:item.ADDVCDNAME === STNM?true:false"
                       :key="key"
                       :position="{ lng: item.LGTD, lat: item.LTTD }"
                       :icon="{
                url: item.url,
                size: { width: 12, height: 10 },
              }"
                       :dragging="true"
                       :raise-on-drag="true"
                       :top="true"
                       :title="item.STNM"
                       @click="lookDetail(item)"
                       @dragstart="dragstart(item.STCD,item.STNM,item.LGTD,item.LTTD)"
                       @dragend="dragend">
              <bm-label :content="item.content"
                        :label-style="labelStyle"
                        :offset="{width: 12, height: -5}"
                        @click="lookDetail(item)" />
              <bm-label v-if="item.DRP>180"
                        :label-style="{ border: '0', background: 'transparent'}"
                        :content="animationcontent"
                        :title="item.STNM"
                        :offset="{width: -15, height: -62}" />
            </bm-marker>
          </template>
          <!-- 信息窗口 -->
          <bm-info-window :position="infoWindow.info"
                          :show="infoWindow.show"
                          @close="infoWindow.show = false"
                          @open="infoWindow.show = true">
            <div class="info-window">
              <table class="tb">
                <tr>
                  <td colspan="2"><span>
                      {{ infoWindow.row.STNM }}
                      {{ infoWindow.row.STCD }}
                    </span></td>
                </tr>
                <tr>
                  <td colspan="2"><span>基本信息</span></td>
                </tr>
                <tr>
                  <td><span>累计雨量:</span></td>
                  <td>
                    {{ infoWindow.row.DRP }}
                  </td>
                </tr>
                <tr>
                  <td><span>数据时间:</span></td>
                  <td>
                    {{ infoWindow.row.TIME }}
                  </td>
                </tr>
                <tr>
                  <td><span>最近小时量:</span></td>
                  <td>
                    {{ infoWindow.row.DRP1H }}
                  </td>
                </tr>
              </table>
              <div class="detail">
                <!-- 雨量站 -->
                <a v-if="infoWindow.row.TYPE==='1'"
                   href="#"
                   @click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
                <!-- 水位站 -->
                <div v-if="infoWindow.row.TYPE==='2'">
                  <a v-if="infoWindow.row.STTP.indexOf('Z') !== -1"
                     href="#"
                     @click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
                  <a v-else-if="infoWindow.row.STTP.indexOf('R') !== -1"
                     href="#"
                     @click="handClickwindow('reservoir',infoWindow.row.STNM)">水库详情</a>
                  <a v-else
                     href="#"
                     @click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
                </div>
                <!-- 水文站 -->
                <div v-if="infoWindow.row.TYPE==='3'">
                  <div v-if="infoWindow.row.STTP.indexOf('P') !== -1 && infoWindow.row.STTP.indexOf('Z') !== -1">
                    <a href="#"
                       @click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
                    <a href="#"
                       @click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
                  </div>
                  <div v-else-if="infoWindow.row.STTP.indexOf('P') !== -1 && infoWindow.row.STTP.indexOf('R') !== -1">
                    <a href="#"
                       @click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
                    <a href="#"
                       @click="handClickwindow('reservoir',infoWindow.row.STNM)">水库详情</a>
                  </div>
                  <div v-else>
                    <a href="#"
                       @click="handClickwindow('rain',infoWindow.row.STNM)">雨量详情</a>
                    <a href="#"
                       @click="handClickwindow('watercourse',infoWindow.row.STNM)">河道详情</a>
                  </div>
                </div>
              </div>
            </div>
          </bm-info-window>
        </baidu-map>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMarker, BmInfoWindow, BmLabel, BmBoundary, BmScale } from 'vue-baidu-map'
import DistanceTool from 'bmaplib.distancetool'

 

  unmount () {
    DistanceTool && DistanceTool.close()
  },
components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
    BmLabel,
    BmBoundary,
    BmScale
}

 

data(){
return
{
 // 地图
      map: null,
      zoom: 10, // 缩放
      center: { lng: 115, lat: 37.0505311969 }, // 选中焦点
      infoWindow: {
        info: {
          lng: '',
          lat: ''
        },
        show: false,
        row: {
          TYPE: '',
          STTP: '',
          STNM: '',
          STCD: '',
          DRP: '',
          TIME: '',
          DRP1H: '',
          LGTD: '',
          LTTD: '',
          url: null
        }
      }, // 窗体参数
      labelStyle: {
        display: 'none',
        color: 'black',
        border: '0',
        height: '20px',
        lineHeight: '20px',
        fontSize: '12px',
        background: 'transparent'
      }, // label样式
      lableContent: '', // 标签模板
      animationcontent: "<div class='circleBox'><div class='circle'></div><div class='circle1'></div><div class='circle2'></div><div class='circle3'></div></div >",
      points: [], // 点数据
      dialogTitle: '', // 标题
      rainDialogVisible: false,
      reservoirDialogVisible: false,
      watercourseDialogVisible: false,
      dragThePoint: null// 拖拽点
}
}

这里的data可以自己定义

methods:{

   // 地图
    async GetAllMapData () {
      this.loading = true
       const data = {
         begtime: '2021-04-01',
         endtime: '2021-07-15'
       }
      try {
        this.points = []
        this.options = [] // 政区
        const { data: res } = await GetAllMapData(data)
        console.log(res.data)
        await res.MapDatas.forEach(item => {
          // 将null的数据替换为'--'
          item.W = item.W === null ? '--' : item.W
          item.Z = item.Z === null ? '--' : item.Z
          item.DRP = item.DRP === null ? '--' : item.DRP
          // 图标判断
          if (item.TYPE === '1') { // 雨量站
            // 图标
            if (item.DRP === 0 || item.DRP === '--') {
              item.url = require('@/assets/img/icon-y-0.png')
            } else if (item.DRP > 0 && item.DRP <= 10) {
              item.url = require('@/assets/img/icon-y-10.png')
            } else if (item.DRP > 10 && item.DRP <= 25) {
              item.url = require('@/assets/img/icon-y-25.png')
            } else if (item.DRP > 25 && item.DRP <= 50) {
              item.url = require('@/assets/img/icon-y-50.png')
            } else if (item.DRP > 50 && item.DRP <= 100) {
              item.url = require('@/assets/img/icon-y-100.png')
            } else if (item.DRP > 100) {
              item.url = require('@/assets/img/icon-y-max.png')
            } else {
              // 默认黄色
              item.con = require('@/assets/img/icon-y-0.png')
            }
            // 文本标注
            item.content = item.STNM + '<table class="label"><tr style="background-color:#FFD700"><td>P:' + item.DRP + '</td></tr></table>'
          } else if (item.TYPE === '2') { // 水位站
            // 图标
            item.url = require('@/assets/img/icon-s-10.png')
            // 文本标注
            if (item.STTP.indexOf('Z') !== -1) {
              item.content = item.STNM + '<table class="label"><tr style="background-color:#FFD700"><td>Z:' + item.Z + '</td></tr></table>'
            } else if (item.STTP.indexOf('R') !== -1) {
              // 水库水位
              item.content = item.STNM + '<table class="label"><tr style="background-color:#008000"><td>R:' + item.W + '</td></tr></table>'
            } else {
              // 默认河道水位Z
              item.content = item.STNM + '<table class="label"><tr style="background-color:#FFD700"><td>Z:' + item.Z + '</td></tr></table>'
            }
          } else if (item.TYPE === '3') { // 水文站
            // 图标
            if (item.DRP === 0 || item.DRP === '--') {
              item.url = require('@/assets/img/icon-z-0.png')
            } else if (item.DRP > 0 && item.DRP <= 10) {
              item.url = require('@/assets/img/icon-z-10.png')
            } else if (item.DRP > 10 && item.DRP <= 25) {
              item.url = require('@/assets/img/icon-z-25.png')
            } else if (item.DRP > 25 && item.DRP <= 50) {
              item.url = require('@/assets/img/icon-z-50.png')
            } else if (item.DRP > 50 && item.DRP <= 100) {
              item.url = require('@/assets/img/icon-z-100.png')
            } else if (item.DRP > 100) {
              item.url = require('@/assets/img/icon-z-max.png')
            }
            // 文本标注
            if (item.STTP === 'PZ') {
              // 河道雨量
              item.content =
                item.STNM +
                '<table class="label"><tr style="background-color:#FFD700"><td>P:' +
                item.DRP +
                '</td></tr><tr style="background-color:#00FFFF"><td>Z:' +
                item.Z +
                '</td></tr></table>'
            } else if (item.STTP === 'PR') {
              // 水库雨量
              item.content =
                item.STNM +
                '<table class="label"><tr style="background-color:#FFD700"><td>P:' +
                item.DRP +
                '</td></tr><tr style="background-color:#00FFFF"><td>R:' +
                item.W +
                '</td></tr></table>'
            } else {
              // 河道雨量
              item.content =
                item.STNM +
                '<table class="label"><tr style="background-color:#FFD700"><td>P:' +
                item.DRP +
                '</td></tr><tr style="background-color:#00FFFF"><td>Z:' +
                item.Z +
                '</td></tr></table>'
            }
          }
          if (item.url) {
            this.points.push(item)
          }
          // 筛选下拉数据
          if (!this.options.find(i => i.label === item.ADDVCDNAME)) {
            this.options.push({ label: item.ADDVCDNAME, value: item.ADDVCDNAME })
          }
        })
        //  this.options=res.
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    zoomEnd (e) {
      this.zoom = e.target.getZoom()
      if (this.zoom >= 13) {
        this.labelStyle.display = 'block'
        console.log(this.labelStyle)
      } else {
        this.labelStyle.display = 'none'
      }
    },
    // 打开信息窗口
    async lookDetail (item) {
      console.log(item)
      if (item.type) {
        const obj = await this.points.find(i => i.STCD === item.STCD && i.STNM === item.STNM && i.ADDVCDNAME === item.ADNM)
        if (obj) {
          this.infoWindow.row = obj
          this.infoWindow.info.lng = obj.LGTD
          this.infoWindow.info.lat = obj.LTTD
        } else {
          this.$message.warning('没有此站!')
        }
      } else {
        this.infoWindow.row = item
        this.infoWindow.info.lng = item.LGTD
        this.infoWindow.info.lat = item.LTTD
      }
      this.infoWindow.show = true
    },
    // 点击出现弹窗
    handClickwindow (type, STNM) {
      // 赋值
      this.dialogTitle = STNM
      if (type === 'rain') { // 雨量
        this.rainDialogVisible = true
      } else if (type === 'reservoir') { // 水库
        this.reservoirDialogVisible = true
      } else { // 河道
        this.watercourseDialogVisible = true
      }
    },
    async dragstart (STCD, STNM, LGTD, LTTD) {
      this.dragThePoint = await this.points.findIndex(i => i.STCD === STCD && i.STNM === STNM && i.LGTD === LGTD && i.LTTD === LTTD)
    },
    dragend (event) {
      if (this.dragThePoint) {
        this.points[this.dragThePoint]
        this.points[this.dragThePoint].LGTD = event.point.lng
        this.points[this.dragThePoint].LTTD = event.point.lat
      } else {
        this.$message.error('查找测站错误!')
      }
    },
    setDistanceToolInstance ({ map }) {
      this.distanceTool = new DistanceTool(map, { lineStroke: 2 })
    },
    openDistanceTool () {
      const { distanceTool } = this
      distanceTool && distanceTool.open()
    }
}

css

.bg {
  display: initial;
}
.bg span {
  padding: 0 25px;
  margin: 0 3px;
}
.zhi {
  position: relative;
  bottom: 50px;
  left: 85px;
  height: 10px;
}
.zhi span {
  padding: 0 20px;
  font-size: 15px;
}
/* 表格 */
.tb {
  border-collapse: collapse;
}
.tb tr td span {
  font-weight: bold;
  text-align: left;
}
.tb tr td {
  width: 98px;
  text-align: center;
}
.tb {
  border-collapse: collapse;
}
.tb tr td span {
  font-weight: bold;
  text-align: left;
}
.tb tr td {
  width: 98px;
  text-align: center;
  border: 1px solid black;
}
.detail {
  margin: 3px 0;
}
.detail a {
  padding: 0 5px;
  color: #66b1ff;
}
.detail a:hover {
  color: red;
}
.label {
  border-collapse: collapse;
}
.label tr td {
  text-align: center;
  border: 1px solid black;
}
/* 动画 */
.circleBox {
  position: relative;
  width: 10;
  height: 10;
  margin: 10px auto;
}
/* 扩散动画 */
.circle,
.circle1,
.circle2,
.circle3 {
  width: 10px;
  height: 10px;
  background: rgba(255, 001, 002, 0.75);
  border: 1px solid rgba(255, 001, 002, 0.85);
  border-radius: 100%;
  position: absolute;
  top: 50px;
  left: 15px;
}
.circle1,
.circle2,
.circle3 {
  /* animation: circleChange 2s 1s ease-out infinite; */
  animation-name: circleChange;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.circle1 {
  animation-delay: 1s;
}
.circle2 {
  animation-delay: 2s;
}
.circle3 {
  animation-delay: 3s;
}

@keyframes circleChange {
  0% {
    transform: scale(1);
    opacity: 0.95;
  }
  25% {
    transform: scale(2);
    opacity: 0.75;
  }
  50% {
    transform: scale(3);
    opacity: 0.5;
  }
  75% {
    transform: scale(4);
    opacity: 0.25;
  }
  100% {
    transform: scale(5);
    opacity: 0.05;
  }
}

Logo

前往低代码交流专区

更多推荐