2020-10-27

最新推荐文章于 2024-03-07 16:53:23 发布

前端_页面仔

最新推荐文章于 2024-03-07 16:53:23 发布

阅读量340

点赞数

分类专栏： vue 前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43131807/article/details/109307082

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

使用vue-baidu-map进行区域地图自定义

页面代码

<Row>
        <FormItem label="区域范围" :label-width="96">
          <baidu-map
            class="map"
            style="height: 500px"
            ak="ODy9MlXnW2V28TlPAmCCLledlCaqHYsG"
            auto-resize
            :zoom="zoom"
            @click="getClickInfo"
            scroll-wheel-zoom
            :center="center"
            :map-click="false"
          >
            <bm-polygon
              :path="path"
              v-for="path of polygonPath.paths"
              :key="path.toString()"
              stroke-color="blue"
              fill-color="#ff9900"
              :fill-opacity="0.8"
              :stroke-opacity="0.5"
              :stroke-weight="2"
              :editing="polygonPath.editing"
              @lineupdate="updatePolygonPath"
            />
            <bm-marker
              v-for="(item, index) in polygonPath.paths[0]"
              :position="item"
              :key="index"
              :dragging="false"
            ></bm-marker>
            <bm-local-search
              :keyword="keyword"
              :auto-viewport="true"
              style="display: none"
            ></bm-local-search>
          </baidu-map>
        </FormItem>
      </Row>
    </Form>
    <div style="text-align:center">
      <Button class="btn" @click="addRange" :loading="loading" type="info"
        >确定</Button
      >
      <Button class="btn" style="margin-left: 18px" @click="close">取消</Button>
    </div>

js中代码

import {
  BaiduMap,
  BmLocalSearch,
  BmMarker,
  BmPolygon
} from "vue-baidu-map";
export default {
  data() {
    return {
      keyword: "",
      zoom: 11,
      center: { lng: 118.713023, lat: 32.157628 },
      polygonPath: {
        editing: true,
        paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      },
      map: null,
      zonerang: null,
      loading: false
    };
  },
  methods: {
    addRange() {
      // console.log(this.polygonPath.paths);
    },
    close() {},
    // 开启多边形绘制
    toggle(name) {
      this[name].editing = !this[name].editing;
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths) {
        this.polygonPath.paths = [];
      }
    },
    // 鼠标左键键多边形绘制
    getClickInfo(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();
    }
  },
  components: {
    BaiduMap,
    BmLocalSearch,
    BmMarker,
    BmPolygon
  }

效果图：