百度地图之 区域划分、在线人员点标记、点每个标记点，弹出对应的信息

最新推荐文章于 2023-02-21 16:59:59 发布
最新推荐文章于 2023-02-21 16:59:59 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43675173/article/details/106479766
版权 
在线人员，箭头指向的分别是一级是镇的整体在线人员，二级菜单指的的村的在线人员
有区域划分、自定义弹窗信息

<template>
  <div class="contentHome">
    <div class="forest" @click="froest"><img class="forestImg" src="@/assets/img/森林.png" alt=""></div>
    <div v-if="trueList" class="left">
      <el-table :data="treeList"
                :row-style="tableRowStyle"
                :header-cell-style="tableHeaderColor"
                :show-header="false"
                style="width: 100%;background-color: transparent;"
                height="98%"
                row-key="id"
                @row-click="submitForm">
        <el-table-column prop="name" label="名称" sortable />
      </el-table>
    </div>
    <div class="right">
      <baidu-map :center="center"
                 :zoom="zoom"
                 :double-click-zoom="false"
                 :scroll-wheel-zoom="true"
                 style="margin: 20px 20px 20px 0;height: 100%;width: 100%; border-style: solid ;border-width:1px; border-color: #8c939d"
                 @ready="handler"

      >
        <!-- v-for="(value,index) in points" :key="index" -->
        <bm-marker v-for="(value,index) in points" :key="index" :position="value" :icon="{url: img3, size: {width: 35, height: 65}}" @mouseover="overTag(value)">
          <bm-label :content="value.realName" :label-style="{color: '#000', fontSize : '12px',border:'1px solid #000'}" :offset="{width: 0, height: 40}"/>
        </bm-marker>
        <!-- <bm-point-collection :points="points" color="" shape="BMAP_POINT_SHAPE_WATERDROP" size="BMAP_POINT_SIZE_SMALL" @mouseover="overTag" /> -->
        <bm-polygon v-for="(item,index) in mpoints"
                    :key="index"
                    :path="item.riverTrack"
                    :stroke-color="mColor"
                    :stroke-weight="mwidth"
                    :fill-color="fColor"
                    :fill-opacity="fopacity"
                    :stroke-opacity="mopacity"
                    @mouseover="overTag1(item)"
        />
        <bm-info-window :position="infoPosition" :show="infoOff" title="人员信息：" class="windowbm" style="display:block" @close="infoWindowClose" @open="infoWindowOpen">
          <div class="message" style="display:block">
            <div v-if="infoCont.date" style="display:block; background-color:#89C477;padding-left:5px;width:102%;color:#fff;font-weight: bold;padding-top:5px;padding-bottom:5px"> 人员信息：</div>
            <div v-if="infoCont.riverName" style="display:block; background-color:#fff;padding-left:5px;width:102%;color:#fff;font-weight: bold;padding-top:5px;padding-bottom:5px"/>
            <div class="blackFamily" style="display:block;padding-left:5px;padding-bottom:10px">
              <el-row v-if="infoCont.riverName" style="display:block">
                <!-- <el-col :span="5" style="display:block"> <span class="silverFamily">区域：</span></el-col> -->
                <el-col :span="19" style="display:block"> {{ infoCont.riverName }}</el-col>
              </el-row>
              <el-row v-if="infoCont.date" style="display:block">
                <el-col :span="5" style="display:block"> <span class="silverFamily">时间：</span></el-col>
                <el-col :span="19" style="display:block"> {{ infoCont.date | parseTime('{y}-{m}-{d} {h}:{i}') }}</el-col>
              </el-row>
              <el-row v-if="infoCont.realName" style="display:block">
                <el-col :span="5" style="display:block"> <span class="silverFamily">姓名：</span></el-col>
                <el-col :span="19" style="display:block"> {{ infoCont.realName }}</el-col>
              </el-row>
              <el-row v-if="infoCont.officeName" style="display:block">
                <el-col :span="5" style="display:block"><span class="silverFamily">部门：</span></el-col>
                <el-col :span="19" style="display:block"> {{ infoCont.officeName }}</el-col>
              </el-row>
              <el-row v-if="infoCont.address" style="display:block">
                <el-col :span="5" style="display:block"><span class="silverFamily">地址：</span></el-col>
                <el-col :span="19" style="display:block"> {{ infoCont.address }}</el-col>
              </el-row>
              <el-row v-if="infoCont.lng" style="display:block">
                <el-col :span="5" style="display:block"><span class="silverFamily">经度：</span></el-col>
                <el-col :span="7" style="display:block"> {{ infoCont.lng }}</el-col>
                <el-col :span="5" style="display:block"><span class="silverFamily">纬度：</span></el-col>
                <el-col :span="7" style="display:block"> {{ infoCont.lat }}</el-col>
              </el-row>
              <!-- <el-row v-if="infoCont.lng" style="display:block">
                <el-col :span="5" style="display:block"><span class="silverFamily">纬度：</span></el-col>
                <el-col :span="19" style="display:block"> {{ infoCont.lat }}</el-col>
              </el-row> -->
            </div>
          </div>
        </bm-info-window>
      </baidu-map>
    </div>
  </div>
</template>
<script>
import { organization, peopleMap, allRiver, userOnlineCoun } from '@/api/index'
import { unescape } from '@/utils/index'
export default {
  data() {
    return {
      img3: require('@/assets/img/person.png'),
      points: [],
      treeList: [],
      treeProps: {
        value: 'id',
        label: 'name'
      },
      fullscreenLoading: false, // 地图加载动画
      // 地图初始化的位置
      center: { lng: 109.15374, lat: 33.42366 },
      // 地图内的大小
      zoom: 12,
      // 这个是搜索下的东西
      location: '',
      // 这个是选择搜索列表中数据的title以及经纬度
      locationdata: {
        title: '',
        center: '',
        addr: ''// 地址
      },
      geolocation: '',
      BMap: '',
      textMap: {
        map: '地图'
      },
      dialogStatus: 'map',
      mapCPM: false,
      inputaddr: '',
      organizationId: null,
      show: false,
      isShowInfo: false,
      infoOff: false, //  信息窗口显示
      // infoCont: '', // 信息窗口内容
      infoPosition: { lng: 0, lat: 0 }, // 信息窗口位置
      contAddrList: [],
      trueList: false,
      mpoints: [],
      infoCont: {
        'officeId': undefined,
        'date': undefined,
        'realName': undefined,
        'officeName': undefined,
        'address': undefined,
        'lng': undefined,
        'parentIds': undefined,
        'label': undefined,
        'userId': undefined,
        'lat': undefined
      }
    }
  },
  computed: {
    mColor() {
      return 'blue'
    },
    fColor() {
      return 'transparent'
    },
    mwidth() {
      return 4
    },
    mopacity() {
      return 0.5
    },
    fopacity() {
      return 0
    }
  },
  created() {
    this.getTreeList()
  },
  mounted() {
    var organizationNum = this.organizationId === null ? '' : this.organizationId
    window.setInterval(() => {
      console.log(organizationNum)
      setTimeout(this.peopleMap(organizationNum), 0)
    }, 5000)
  },
  methods: {
    // 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
    // var map = new BMap.Map('container', { mapType: BMAP_HYBRID_MAP }) // 设置卫星图为底图
    handler({ BMap, map }) {
      console.log('1111', BMap)
      console.log('2222', map)
      map.addControl(new BMap.MapTypeControl({ mapType: ['BMAP_HYBRID_MAP'] }))
      map.setMapType(BMAP_HYBRID_MAP)
      // window.map = map // 注册为全局
      var geolocation = new BMap.Geolocation()
      this.geolocation = geolocation
      geolocation.getCurrentPosition(() => {
      })
      geolocation.enableSDKLocation()
      geolocation.getCurrentPosition(function(r) {
        console.log(r)
        // eslint-disable-next-line no-undef,eqeqeq
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // 把得到的经纬度传给map，就实现了第一步我们的定位
          if (r.accuracy == null) {
            return
          }
        } else {
          console.log('failed' + this.getStatus())
        }
      }, { enableHighAccuracy: true })
      this.BMap = BMap
      console.log(this.BMap)
      // loading.close()
      this.peopleMap('')
      this.allRiver()
    },
    // 删除覆盖物
    clearOverlays() {
      window.map.clearOverlays()
    },
    getTreeList() {
      this.listLoading = true
      organization().then(response => {
        const fetchOrganizationList = response.data
        // console.log('response', response.data[0])
        for (var i = 0; i < fetchOrganizationList.length; i++) {
          this.treeList.push({
            id: fetchOrganizationList[i].id,
            name: fetchOrganizationList[i].name,
            children: fetchOrganizationList[i].children
          })
        }
        this.listLoading = false
      })
    },
    froest() {
      this.trueList = !this.trueList
    },
    // 数据接口
    peopleMap(organizationId) {
      peopleMap(organizationId).then(response => {
        this.points = []
        var positionList = response.data.data
        this.contAddrList = response.data.data
        const points = []
        for (var i = 0; i < positionList.length; i++) {
          const position = { lng: positionList[i].lng, lat: positionList[i].lat, id: positionList[i].officeId, realName: positionList[i].realName }
          points.push(position)
        }
        this.points = points
        if (this.points.length != '0') {
          this.center = {
            lng: this.points[0].lng,
            lat: this.points[0].lat
          }
        }
        // console.log('this.points', this.points)
      })
    },
    allRiver() {
      allRiver().then(res => {
        console.log('allRiver', res.data.data)
        this.mpoints = res.data.data
        this.mpoints.forEach(item => { // 获取滑过标点窗体信息
          // item.riverTrack = JSON.parse(unescape(item.riverTrack))
          item.riverTrack = JSON.parse(item.riverTrack)
          console.log(item.riverTrack)
        })
        console.log('this.mpoints', this.mpoints)
      })
    },
    // 显示标点
    submitForm(data) {
      console.log('dian', data)
      this.organizationId = data.id
      this.peopleMap(this.organizationId)
    },
    // 滑过标点显示窗体
    overTag1(value) {
      console.log('value', value)
      this.infoOff = true
      this.infoPosition.lng = value.riverTrack[0].lng
      this.infoPosition.lat = value.riverTrack[0].lat
      this.infoCont = {
        riverName: undefined
      }
      this.infoCont.riverName = value.riverName
    },
    overTag(value) {
      console.log('overTag的value', value)
      console.log('contAddrList', this.contAddrList)
      // console.log('this.contAddrList', this.contAddrList)
      this.infoOff = true
      this.infoPosition.lng = value.lng
      this.infoPosition.lat = value.lat
      this.infoCont = {
        'officeId': undefined,
        'date': undefined,
        'realName': undefined,
        'officeName': undefined,
        'address': undefined,
        'lng': undefined,
        'parentIds': undefined,
        'label': undefined,
        'userId': undefined,
        'lat': undefined
      }
      this.contAddrList.forEach(item => { // 获取滑过标点窗体信息
        // console.log('item',item)
        if (item.officeId === value.id) {
          // this.infoCont = '名称：' +  item.realName
          this.infoCont = item
        }
      })
    },
    // 窗体打开和关闭
    infoWindowClose(e) {
      this.infoOff = false
    },
    infoWindowOpen(e) {
      this.infoOff = true
    },
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: pink'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500;'
      }
    }
  }
}
</script>
<style>
  .left .el-table td, .el-table th{
    background-color: #fff!important;
    color:#000!important;
  }
  .left .el-table th, .el-table tr, .el-table td {
    border: 0;
  }
  .left .el-table__empty-block{
    background-color: #fff!important;
    color:#000!important;
  }
  .left .topBorder{
    border-top:1px solid #fff;
  }
  .left .el-table__body tr:hover > td {
    background-color: #409EFF !important;
    color:#fff!important;
  }
  /*地图标题*/
.BMap_bubble_title {
 color:#fff;
 font-size:13px;
 font-weight:bold;
 text-align:left;
 padding-left:5px;
 padding-top:5px;
 background-color:#89C477;
}
/* 消息内容 */
.BMap_bubble_content {
 background-color:white;
  width:96%;
 /* padding-left:5px;
 padding-top:5px;
 padding-bottom:10px; */
  margin-right:0;
  /* background-color: green; */
}
/* 内容 */
.BMap_pop div:nth-child(9) {
 top:35px !important;
 border-radius:7px;
  background-color: #fff;
}
/* 左上角删除按键 */
.BMap_pop img {
 top:43px !important;
 left:330px !important;
}
.BMap_top {
 display:none;
}
.BMap_bottom {
 display:none;
}
.BMap_center {
 display:none;
}
.BMap_pop div:nth-child(1) {
 display:none;
}
.windowbm{
  display: block!important;
   width:335px;
}
.BMap_pop div:nth-child(5) {
 display:none;
}
.BMap_pop div:nth-child(3) {
 display:none;
}
.BMap_pop div:nth-child(7) {
 display:none;
}
.blackFamily .el-row{
  margin-bottom:10px!important;
}
</style>
<style scoped>
  .contentHome{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
  }
  .left{
    position: absolute;
    left:2%;
    top:15%;
    z-index: 3;
    width:13%;
    height:85%;
    padding:20px 0 20px 20px;
    overflow: hidden;

  }
  .right{
    width:100%;
    height:100%;
    overflow: hidden;
  }
  .windowbm{
    width:335px;

  }
  .list{
    width:300px;
    height:300px;
  }
  .forest{
    position: fixed;
    left:1%;
    top:15%;
    z-index: 4;
  }
  .forestImg{
    width:32px;
    height:32px;
  }
  .message{
    font-size: 14px;
    width:98%;
    /* line-height: 25px; */
  }
  .silverFamily{
    font-weight: 500;
    color:rgb(112, 111, 111);
  }
  .blackFamily{
    font-weight: bold;
  }
  .BMap_bubble_title{
    background-color: springgreen!important;
  }

</style>
哈哈1133哈哈
关注
专栏目录
21个 JVM 技术点详解（附面试解答）
威哥爱编程，CSDN 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
03-20 862
Bootstrap 类加载器负责加载 Java 核心类库，Extension 类加载器负责加载 Java 扩展库，而 Application 类加载器则负责加载应用程序的类。好了，以上V哥给大家详细介绍了 JVM 中涉及的21个点，全网还没有针对 JVM 这样来梳理的内容，希望对你深入了解 JVM 有一定帮助，另，V 哥给大家推荐一本《深入 JVM 虚拟机》的书籍，可以作为工具书使用，高阶的 Java 程序员几乎人手一本。例如，类加载器可以实现沙箱机制，限制某些代码只能访问特定的资源，提高程序的安全性。
mapinfo在线地图插件_利用开源软件下载地图和影像瓦片数据（修订版）
weixin_39658318的博客
11-26 1342
作者：周洪锋(互联网空间数据挖掘研究小组)指导：小瓦(互联网空间数据挖掘研究小组，geodatamining，非公众号)小瓦曾经在《互联网地理数据挖掘》知识星球里发表过《利用开源软件下载地图和影像瓦片数据》一文，洪锋同学、高同学发现了小瓦的问题，同时天地图网站也发生了一些变化，于是洪锋同学经过自己的实践，在前文的基础上重新修订了一版，供大家学习借鉴。前言目前网络上存在着很多方法能够下载地...
百度地图定位，标记摸个区域等
08-25
百度地图定位，显示自己的当前位置，获取经纬度。
百度地图打标记并圈出范围（米）
05-11
在百度地图上打标记，可长按标记处按下的地方，并用半透明圆圈标出周围自定义多少米范围，同样适用于google map，几乎不用改代码
百度地图圈出一个范围
07-01
以一个经纬度为圆心，传入一个半径，画出一个圆
vue 使用百度地图以及地图样式、绘制 点、点聚合和多边形区域、自定义点样式、聚合样式等
weixin_54106595的博客
03-23 5117
index.html 引入百度地图api： <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的的密钥"> 引入样式文件：我在官网上下载的样式文件，可以自定义 这个样式文件放在public文件夹下面的json文件夹里 <script type="text/javascript" src="json/custom_map_con
员工住址地图标注显示.rar
06-13
详细介绍：https://www.cnblogs.com/baissy/p/11009932.html 公司一般都有通讯和住址的统计，但是文字化的表格根本就不知道住在哪。 用百度地图就可以轻松解决， 而且公司还经常人员变动，读取excel中的内容，就不用每次还要更改地图文件了。 在遇到需要聚餐在地图中标点时，在文本框中输入地址，多个地址需要用英文逗号“,”分割。
高德地图按某个值进行区域图标记，点击弹出相应的图表
最新发布
06-20
本篇将深入探讨如何利用高德地图API来实现“按某个值进行区域图标记，点击弹出相应的图表”的功能，以及涉及到的网络图概念。 首先，我们要理解什么是“区域图标记”。在地图上，区域图标记通常指的是根据特定的...
JAVA核心知识点整理.pdf
01-18
当方法调用结束，对应的栈帧也会被弹出。 2.3. 本地方法区（线程私有）： 本地方法区主要用于支持JNI（Java Native Interface），即Java与本地（非Java）代码交互的地方。这里存储的是线程执行本地方法时使用的数据...
百度地图信息窗体框背景样式修改（标记点与海量点弹信息框）
qq_51066068的博客
09-27 3244
百度地图信息窗体框背景样式修改（标记点与海量点弹信息框）
百度地图多行政区域划分
05-16
百度地图行政区域划分-包括多行政区域划分，不同行政区域颜色填充，不同区域标注添加，不同区域事件添加 注：百度地图需要在百度地图API申请key。
百度地图系列05——显示屏幕范围内的marker
It一zhai男
03-28 9029
百度地图系列5——显示屏幕范围内的marker原理：根据屏幕中心点坐标和屏幕的长宽计算出屏幕左上角和右下角坐标，然后判断所显示的marker是否在这个范围内。中心点坐标： LatLng mCenterLatLng = status.target; double lat = mCenterLatLng.latitude; double lng = mCent
百度地图添加点、多边形、圆
frank_hehe的博客
07-30 1865
最近抽空看了一下百度地图的覆盖物API，特此记录一下，后续会继续学习地图其他的操作，也会记录… <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" c...
使用百度地图API按照分类扎不同颜色的点
c1052981766的专栏
06-24 2990
最近接手一个任务，要求对不同分类的元素以不同的颜色呈现在地图上。 一开始思考通过热力图的形式。 通过设置MAX和 区间颜色来进行。 heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 5, "opacity": 0}); map.addOverlay(heatmapOverlay); heatmapOverlay.setDataSet({data: po
百度地图利用数组实现多个标注点的显示
dididan5079的博客
04-17 1340
原文地址：http://blog.csdn.net/a497785609/article/details/24009031 效果图： <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti...
利用百度地图api，在地图上设置一个标记点，以标记点为圆心，搜索不同半径范围内的覆盖物
qq_27387133的博客
03-07 7689
利用百度地图api，通过在输入框（带自动填充）输入标记点，然后给标记点设置了一个信息窗口，信息窗口中可以选择搜索的半径范围，分别为1，2，3，5，10km。通过下拉框选择好半径范围后，自动画出一个对应半径的圆，并显示出在范围内的覆盖物（覆盖物是随机生成的，如有需要可以通过后台返回自己的数据并生成对应的覆盖物），点击覆盖物弹出自定义的覆盖物信息窗口。效果图如下： 相关实现如下： 1.引入...
百度地图根据所在地区划分区域、根据经纬度节点绘制区域
yuishelly的博客
02-21 2044
百度地图根据所在地区划分区域、根据经纬度节点绘制区域
百度地图绘制自定义区域
qq_38519358的博客
11-03 6054
使用百度地图开发中碰到需要在地图上自定义选择某个区域，并且可以改变区域大小，然后进行某些操作。 这里用到了百度地图GL版的开源工具库BMapGLLib的自定义绘制功能，详情可查看https://github.com/huiyan-fe/BMapGLLib code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-
Annotations Over Tag Interfaces 使用注解代替标志接口
天水一方
07-02 182
原文地址:http://www.c2.com/cgi/wiki?AnnotationsOverTagInterfaces 本文主要介绍:使用注解代替以前的标签接口: 批注:标签接口是指,没有任何方法,只是用于区域特别的类的空接口. 在java1.5之前,常用标签接口标记一个类,如同给类增加一些属性,也就是接口被像元数据一样被使用. Java Annotations提供了更广泛的...
信息安全等级测评师初级：必备考试知识点与等级划分详解
信息安全等级测评师初级考试主要围绕信息安全管理体系中的关键知识点展开，旨在考察考生对信息安全等级保护的基本理解和实际应用能力。以下是部分题目所涉及的知识点： 1. 法律责任与监管： - 根据《信息安全等级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值