Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回

话不多说,直接上代码:

参考官网代码改编:https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting

index.vue

<template><baidu-map class="map":center="{lng: 116.404, lat: 39.915}":zoom="14"  :map-click="false" :double-click-zoom="false"@mousemove="syncPolyline"@click="paintPolyline"@rightclick="newPolyline"><bm-control :offset="{width: 15, height: 15}"><div class="map-edit-container"><div class="map-edit-item"><i class="water-icon-device-addpo" :class="{currEdit: markerObj.editing}" @click="toggle('markerObj')"  title="绘制点"></i><i class="water-icon-device-xian" :class="{currEdit: polylineObj.editing}" @click="toggle('polylineObj')" title="绘制折线"></i></div><div class="map-edit-item"><i class="water-icon-device-gon" :class="{currEdit: polygonObj.editing}" @click="toggle('polygonObj')" title="绘制多边线"></i><i class="water-icon-device-circle" :class="{currEdit: circleObj.editing}" @click="toggle('circleObj')" title="绘制圆形"></i></div><div class="map-edit-item"><i class="water-icon-device-chexiao" :class="{currEdit: resetData}" @click="resetRecover('resetData')" title="重置"></i><i class="water-icon-device-huifu" :class="{currEdit: recoverData}" @click="resetRecover('recoverData')" title="返回"></i></div></div></bm-control><template v-if="markerObj.isShow"><bm-marker :position="path[0]"  v-for="(path, index) of markerObj.paths" :key="'marker_'+index" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"><bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/></bm-marker></template><template v-if="polylineObj.isShow"><bm-polyline :path="path" v-for="(path, index) of polylineObj.paths" :key="'polyline_'+index" :stroke-weight="2" ></bm-polyline></template><template v-if="polygonObj.isShow"><bm-polygon :path="path" v-for="(path, index) of polygonObj.paths" :key="'polygon_'+index" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" /></template><template v-if="circleObj.isShow"><bm-circle :center="path[0]" v-for="(path, index) of circleObj.paths" :key="'circle_'+index" :radius="circleObj.radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath" :editing="true"></bm-circle></template></baidu-map>
</template><script>import {mapGetters} from 'vuex'export default {data () {return {currEditName: 'polygonObj',resetData: false,recoverData: false,markerObj: {isShow: false,editing: false,paths: []},polylineObj: {isShow: false,editing: false,paths: []},polygonObj: {isShow: false,editing: false,paths: []},circleObj: {isShow: false,editing: false,paths: [],radius: 500}}},computed: mapGetters(['getLastDrawHistory']),methods: {toggle (name) {let nameArr = ['markerObj', 'polylineObj', 'polygonObj', 'circleObj']this.currEditName = namethis[name].editing = !this[name].editingnameArr.splice(nameArr.indexOf(name), 1)nameArr.forEach((curr) => {this[curr].editing = false})},syncPolyline (e) {if (!this[this.currEditName].editing) {return}const {paths} = this[this.currEditName]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)},newPolyline (e) {if (!this[this.currEditName].editing) {return}const {paths} = this[this.currEditName]if(!paths.length) {paths.push([])}const path = paths[paths.length - 1]path.pop()if (path.length) {paths.push([])}},paintPolyline (e) {if (!this[this.currEditName].editing) {return}const {paths} = this[this.currEditName]!paths.length && paths.push([])paths[paths.length - 1].push(e.point)this[this.currEditName].isShow = trueif (this.currEditName === 'markerObj' || this.currEditName === 'circleObj') {this[this.currEditName].editing = false}this.$store.dispatch('setLastDrawHistoryActions', {paths: this[this.currEditName].paths,lastEditName: this.currEditName})},updateCirclePath(e) {this.circleObj.paths[0] = e.target.getCenter()this.circleObj.radius = e.target.getRadius()},resetRecover(name) {if(name === 'resetData') {this[this.getLastDrawHistory.lastEditName].editing = falsethis[this.getLastDrawHistory.lastEditName].isShow = falsethis[this.getLastDrawHistory.lastEditName].paths = []}else{this[this.getLastDrawHistory.lastEditName].isShow = truethis[this.getLastDrawHistory.lastEditName].paths = this.getLastDrawHistory.paths}}}}
</script><style lang="scss" scoped>.map{width: 100%;height: 800px;/deep/ .anchorBL {display: none;}.map-edit-container{width: 250px;height: 40px;line-height: 30px;padding-left: 10px;background-color: #fff;-webkit-box-shadow: 1px 1px 1px #000;box-shadow: 2px 3px 1px #909399;border-radius: 5px;display: flex;.map-edit-item{padding: 0 7px;margin: 6px 0;&:nth-of-type(1), &:nth-of-type(2){border-right: 1px solid rgba(110,110,110,0.3);}i{font-size: 18px;cursor: pointer;margin-left: 5px;padding: 5px;&:hover{background-color: #ccc;}}.currEdit{background-color: #ccc;}}}}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)let store = new Vuex.Store({state: {lastDrawHistory: {paths: [],lastEditName: ''}},getters : {getLastDrawHistory(state) {return state.lastDrawHistory}},mutations: {SET_LAST_DRAW_HISTORY(state,payLoad) {state.lastDrawHistory.paths = payLoad.pathsstate.lastDrawHistory.lastEditName = payLoad.lastEditName}},actions: {setLastDrawHistoryActions({commit}, payLoad) {commit('SET_LAST_DRAW_HISTORY', payLoad)}}
})export default store

Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回相关推荐

Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
vue 项目使用 openlayers根据半径绘制圆形.绘制多边形这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. ...
uni-app使用map组件开发map地图，获取后台返回经纬度进行标点
unia-pp实现map组件,获取后台返回经纬度进行标点官方文档使用步骤代码示例官方文档使用步骤使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发 ...
vue+konva.js图片数据标注多边形矩形---demo2.0。添加了其他功能和完善了代码。
文章目录前言一. 自适应画布二.新矩形和多边形 1.绘画多变形时,右击结束绘画.2.重新调整图形大小时,顶点已经约束不能拖拽出画布. 三.ctrl+z撤销和del删除选中某一个图形,按ctrl ...
vue+openlayers图形交互，实现多边形绘制、编辑和保存
知识点: 1.绘制多边形,实例化ol.interaction.Draw对象 draw_inter = new ol.interaction.Draw({source: source_draw,//矢量 ...

Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回

Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回相关推荐

最新文章

热门文章

Vue Baidu Map组件： 点、线、多边形、圆形、撤销、返回

Vue Baidu Map组件： 点、线、多边形、圆形、撤销、返回相关推荐

最新文章

热门文章

Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回

Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回相关推荐