vue-baidu-map 绘制任意图形

<template>
  <div class="mapMain">
    <el-input v-model="addressKeyword" v-on:input='getSearchCon()' class="searchInput"
              placeholder="请输入地址来直接查找相关位置"></el-input>
    <el-row
      :gutter="20"
      style="padding: 20px 0; margin: 20px 0; border: 1px solid #ccc; border-radius: 4px"
    >
      <el-col :span="3">
        <el-input placeholder="查询" v-model="address"></el-input>
      </el-col>
      <el-col :span="21">
        <el-button type="primary" @click="toggle('polygonPath')"
        >{{ polygonPath.editing ? '重新绘制' : '开始绘制' }}
        </el-button>
        <el-button type="primary" @click="polygonPath.editing=true">编辑</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-col>
    </el-row>
    <baidu-map :map-click="false"
               @click="drawLine" class="bmView" :scroll-wheel-zoom="true" @ready="handler" :center="center"
               style="height:1080px"
               :zoom="zoom" ak="http://17.22.40.34:8219/baidumap/jsapi/api.js">
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>

      <bm-view style="width: 100%; height:1080px; flex: 1"></bm-view>
    
  <!---引入bm-polygon 才能绘制图形-->
      <bm-polygon
        :path="path"
        v-for="path of polygonPath.paths"
        :key="path.toString()"
        stroke-color="blue"
        fill-color="red"
        :fill-opacity="0.1"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="polygonPath.editing"
        @lineupdate="updatePolygonPath"
      ></bm-polygon>
      <bm-marker
        v-for="(item, index) in polygonPath.paths[0]"
        :position="item"
        :key="index"
        :dragging="false"

      ></bm-marker>


      <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>

    </baidu-map>
  
    </div>
    <el-dialog title="" align="left" width="80%" :visible.sync="innerVisible">
      <desinfo @handleDialogClose="handleDialogClose" :desinfoPageParam='desinfoPageParam' ref='infoPage'></desinfo>
    </el-dialog>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'

import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import desinfo from './Desinfo'
import BmPolygon from "vue-baidu-map/components/overlays/Polygon";

export default {
  name: 'TestBaiDu',
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch,
    BmScale,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmInfoWindow,
    desinfo,
    BmPolygon
  },
  data() {
    return {
      address: '',
      polygonPath: {
        editing: false,
        paths: [[{"lng": 117.354751, "lat": 39.054754}, {"lng": 117.442138, "lat": 39.052065}, {
          "lng": 117.37976,
          "lat": 39.002959
        }]] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      },
      innerVisible: false,
      desinfoPageParam: {
        id: '',
        name: ''
      },
      lngLatArr2: [{
        longitude: 117.023621,
        latitude: 39.374409,
        name: '测试一'
      }, {
        longitude: 117.307892,
        latitude: 39.704835,
        name: '测试二'
      }, {
        longitude: 21.494243,
        latitude: 26.299542,
        name: '测试三'
      }],
      lngLatArr: [{
        longitude: 117.225495,
        latitude: 39.087195,
        name: '测试一'
      }, {
        longitude: 117.515259,
        latitude: 38.931397,
        name: '测试二'
      }],
      isHide: false, // 是否显示标签内容
      staticimg: './static/ld_ld.png',
   
        }
      ],
 
      addressKeyword: '',
      center: {
        lng: 109.45744048529967,
        lat: 36.49771311230842
      },
      zoom: 16,
      districtLoading: 0,
      blist: [],
      infoWindow: {
        lng: 0,
        lat: 0,
        show: false,
        info: {
          air: 0,
          area: 12313,
          areaEnergy: 0.64,
          code: "440300A055",
          energy: 7922.66,
          lat: "32.043433",
          lng: "118.784107",
          name: "市人民检察院",
          water: 0
        },
      },
    }
  },
  mounted: function () {



  },
  methods: {
    handler({
              BMap,
              map
            }) {
      var point = new BMap.Point(117.225495, 39.087195)
      map.centerAndZoom(point, 8); // 将point点放入map中，展示在页面中心展示，10=缩放程度
      map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮


    },
 
    // 开启多边形绘制
    toggle(name) {
      this[name].editing = !this[name].editing;
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths) {
        this.polygonPath.paths = [];
      }
    },
    // 鼠标左键键多边形绘制
    drawLine(e) {
      if (!this.polygonPath.editing) {
        return;
      }
      const {paths} = this.polygonPath;
      !paths.length && paths.push([]);
      paths[0].push(e.point);
    },

    // 修改拖拽坐标
    updatePolygonPath(e) {
      this.polygonPath.paths[0] = e.target.getPath();
    },
    // 鼠标移动时
    syncPolygon(e) {
      // this.polygonPath.editing = true
      if (!this.polygonPath.editing) {
        return
      }
      const {paths} = this.polygonPath
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    // 鼠标左键点击时往路径里push一个点
    newPolygon(e) {
      if (!this.polygonPath.editing) {
        return
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this['polygonPath'].editing = !this['polygonPath'].editing
      const {paths} = this.polygonPath
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    // 鼠标右键多边形绘制完成
    // 保存
    save() {
      console.log(JSON.stringify(this.polygonPath.paths))
      //debugger
      if (!this.polygonPath.editing) {
        return;
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this["polygonPath"].editing = !this["polygonPath"].editing;
      const {paths} = this.polygonPath;
      if (!paths.length) {
        paths.push([]);
      }
      if (paths[0].length > 2) { // 3个点才能成区域
        // 保存处理相关坐标和请求接口
        var str = JSON.stringify(this.polygonPath.paths[0]);
        var params = JSON.stringify({
          name: "123",
          area: str
        });
        console.warn(params, 99999);
      }
    },
  }
}
</script>
<style scoped lang="less" type="text/less">
  .mapMain {
    .searchInput.el-input {
      position: absolute;
      top: 13px;
      z-index: 10;
      left: 16px;
      width: 350px;
    }
    .rightNav {
      z-index: 8;
      position: absolute;
      right: 0px;
      width: 150px;
      height: 300px;
      top: 50px;
      ul {
        li {
          background: #333333;
          opacity: 0.7;
          color: #000000;
          background-color: rgba(0, 0, 0, 0.86);
          box-shadow: 1px 1px 5px #888888;
          color: #FFFFFF;
          line-height: 40px;
          position: relative;
          margin: 5px 0px;
          border-radius: 5px;
          width: 137px;
          text-align: center;
          cursor: pointer;
          img {
            position: absolute;
            left: 8px;
            top: 9px;
          }
        }
        li:hover {
          background: #333333;
          opacity: 0.9;
        }
      }
      .laberCon {
        width: 300px;
        background: #fff;
        position: absolute;
        right: 10px;
        height: 400px;
        top: 0px;
        .labelTitle {
          background: #ccc;
          padding: 6px;
        }
        .listMain {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          .listCon {
            display: flex;
            line-height: 28px;
            font-size: 14px;
            margin: 5px auto;
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }

  }

</style>

最终的效果

image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,552评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,666评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,519评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,180评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,205评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,344评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,781评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,449评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,635评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,217评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,775评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2赞 341