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

 话不多说,直接上代码:

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

 

效果图

index.vue

 

 

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.paths
            state.lastDrawHistory.lastEditName = payLoad.lastEditName
        }
    },
    actions: {
        setLastDrawHistoryActions({commit}, payLoad) {
            commit('SET_LAST_DRAW_HISTORY', payLoad)
        }
    }
})

export default store