百度地图开发

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' }]
      }
  1. 上述是自定义了校验规则,需要自己写出来,写在data中,return之前,例如:
var validatorname = (rule,value,callback) => {
      if(!isNaN(parseFloat(value)) && isFinite(value)){
        callback();
      }else{
        callback(new Error("请输入数字类型的编号"));
      }
    };
  1. 这样配置就完成了,下面说一下使用,例如:
var flag = true;
      this.$refs['formrule'].validate((valid) => {
        if(!valid) {
          flag = false;
        }
      });

5. vuex的使用

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

6. router的使用

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

7. axios的使用

8. 点的添加以及点聚合

坐标转换成百度所需

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值