Vue中使用Vuebaidumap多点覆盖(自定义图标)

最新推荐文章于 2024-06-03 11:58:31 发布
最新推荐文章于 2024-06-03 11:58:31 发布
阅读量3.2k 收藏
点赞数
分类专栏： Vue-baidu-map 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55959870/article/details/125319481
版权

引包不用我多说了把

官方文档

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;
  }
}

张飞飞啦啦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 和 百度地图，创建自定义图标和自定义提示窗
墨书白的博客
01-18 2099
引入百度地图API于 public/index.html 中，API如下： <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"> 若没有账号（也就是没有秘钥）可以自行申请☞方法点击此处 验证，map是否已经加载成功： console.log(BMap) <!-- 控制台出现如下，则成功 --> 正题=》 1.首先创建地
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
01-22
具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写...
Vue-baidu-map覆盖物动态增加（多边形、标记点）
Holly31的博客
04-22 1957
页面增加标记及多边形等覆盖物，标记可拖拽调整，同时也可通过关键词搜索获取获取经纬度，调整标记点位置，获取推荐几个地址，问题地址下拉选择其中一个地址等。
vue中Bmap百度地图自定义带标签的图标
jieyucx的博客
03-31 1085
【代码】vue中Bmap百度地图自定义带标签的图标。
vue在PC端引用百度地图实现自定义省市区海量点
最新发布
weixin_52830464的博客
06-03 282
/ JS去除JSON字符串各种空格、换行符// GL版本return;v=1.0&type=webgl&ak=${你的ak}&callback=initBMapGL`;});放在src/assets目录下m1.pngm2.pngm3.png在与vue页面文件同级目录定义组件 bmap.vue-- 地图 -->
百度地图实现自定义覆盖物等功能
03-11
自己做的一个综合实例，包括自定义覆盖物 地图单击弹窗 提示信息等功能 。唯一遗憾的是没有实现标注物聚合。这里给出网址大家可以自己研究下http://my.eoe.cn/imesong/archive/21397.html
vue-baidu-map添加覆盖物-点
c153284575的博客
12-31 2020
vue-baidu-map 简单f封装了 components/index.vue 引用vue插槽 方便使用，也可直接插入 <slot></slot> <!-- * @Description: 百度地图组件 * @Author: Dragon * @Date: 2020-12-31 13:18:38 * @LastEditTime: 2020-12-31 16:19:24 * @LastEditors: Dragon --> <templat.
VUE + JavaScript API GL实现百度地图的自定义覆盖物、自定义小图标、折线、点
weixin_46447771的博客
08-29 1139
记录一下自己学习百度地图写的代码。
在vue项目中使用百度地图，并添加覆盖物，多个点标注
sunweixin8的博客
07-05 2405
在vue项目中使用百度地图，并批量添加点标注以及覆盖物
vue使用自定义icon图标的方法
08-27
本文主要介绍了在 Vue 中使用自定义的 Icon 图标的方法。自定义 Icon 图标可以丰富 Vue 项目的视觉体验，为用户提供更加直观的交互方式。下面将详细介绍两种使用自定义 Icon 图标的方法：使用 Iconfont 和使用 ...
vue项目中使用bpmn-自定义platter的示例代码
11-20
在Vue项目中，使用BPMN (Business Process Model and Notation) 可以帮助我们创建流程图...对于其他开发者来说，这个教程提供了关于如何在Vue中扩展BPMN功能的宝贵参考，有助于他们在实际项目中实现类似的自定义需求。
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 中使用阿里巴巴黑白图标和彩色图标 在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，...
Vue Baidu Map--点标记bm-marker的使用、注意事项
醉殇姒若梦遗年 ツ的博客
08-10 2904
点标记bm-maker的使用，报错Error in callback for watcher "labelStyle": "TypeError: Cannot read property 'setStyle' of undefined"是bm-label组件的参数labelStyle使用方法不正确导致的，labelStyle需要先在data中声明。
如何在vue中使用百度地图添加自定义覆盖物（水波纹）动画效果
cc蒲公英的博客
09-07 3099
如何在vue中使用百度地图添加自定义覆盖物（水波纹）动画效果
VUE&baidu-map 分类标注打点 +点击标注弹窗样式修改
weixin_44183340的博客
09-08 1318
效果图: <template> <div> <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler" :mapStyle="mapStyle" :style="{height:clientHeight-184+'px'}" > ...
vue中使用百度地图 添加标记物，点击标记物弹窗，画运动轨迹，位置纠偏，逆地址解析
weixin_43965143的博客
08-13 7364
在vue项目中使用百度地图，添加标记物、信息弹窗、动态画轨迹 首先安装 <div id="allmap"> <baidu-map class="bm-view" :center="center" @ready="handler"> </baidu-map> </div> <style scoped lang="scss"> #allmap { width: 100%; height
vue使用百度map，实现点击Marker切换图标，以及展示此Marker信息。
一个前端的自述
07-16 3453
先放效果图，其中每一个点代表了小区的位置，打了贴纸隐藏的地方是小区的名字和地址。见谅。   一、接入百度地图，首先要注册成为百度地图开放平台的开发者，申请百度地图的密钥（ak），web端使用的是JavaScriptAPI，所以我们申请的就是JavaScriptAPI。   二、在你的ak申请好了之后，在public下的index引入。 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的
【baidu-map】 vue百度地图插件使用——添加坐标标识
m0_74094484的博客
09-05 1020
本篇主要讲【baidu-map】的标记【bm-marker】和信息弹窗【bm-info-window】
vue-baidu-map中marker将图标换为自定义
03-29
1. 在项目中引入自定义图标的图片资源。 2. 在使用marker时，通过传入icon参数来指定自定义图标的路径，代码如下： ```html <template> <div id="map"></div> </template> <script> import BaiduMap from 'vue-baidu-map' export default { components: { BaiduMap }, data () { return { markers: [ { lng: 116.404, lat: 39.915, icon: require('@/assets/marker.png') // 自定义图标路径 } ] } } } </script> ``` 3. 在CSS中定义自定义图标的样式，例如： ```css /* 自定义图标样式 */ .my-marker { width: 24px; height: 24px; background-image: url('@/assets/marker.png'); background-size: cover; } ``` 4. 在使用marker时，通过传入icon参数来指定自定义图标的样式，代码如下： ```html <template> <div id="map"></div> </template> <script> import BaiduMap from 'vue-baidu-map' export default { components: { BaiduMap }, data () { return { markers: [ { lng: 116.404, lat: 39.915, icon: { className: 'my-marker' // 自定义图标样式类名 } } ] } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值