1. 概述

vue-element-admin以及vue整合后的百度地图api结合实现地图开发


登录解析

2. 准备

项目搭建，使用的是vue-element-template作为开发基础

3. 百度地图的引入

首先

引入vue-baidu-map依赖


具体使用参考

使用文档



还是使用文档



不清不楚的属性补录

4. 写一个搜索框

用el-form写一个行内表单即可，这里记录一下表单校验的配置以及使用

1. el-form中属性 :rule,:model,ref
2. el-form-item中属性 prop
3. 具体组件中属性 v-model
4. rule在data的return中定义，形式例如：

rules:{
        input:[{ validator:validatorname, trigger:'blur' }]
      }

5. 上述是自定义了校验规则，需要自己写出来，写在data中，return之前，例如：

var validatorname = (rule,value,callback) => {
      if(!isNaN(parseFloat(value)) && isFinite(value)){
        callback();
      }else{
        callback(new Error("请输入数字类型的编号"));
      }
    };

6. 这样配置就完成了，下面说一下使用，例如：

var flag = true;
      this.$refs['formrule'].validate((valid) => {
        if(!valid) {
          flag = false;
        }
      });

5. vuex的使用

文档



vuex相关配置



…相关


在vuex中配置actions,无论用没用到，都要加{commit}，不然获取参数会错误，并且，这里只能接收一个额外参数。

6. router的使用

文档


vue中路由渲染是追加式的，另外如果路由名重复的时候是用的前面的。

7. axios的使用

8. 点的添加以及点聚合

坐标转换成百度所需