vue添加定位功能_Vue+Antd搭配百度地图实现搜索定位等功能

前言

最近，在做vue项目的时候有做到选择地址功能，而原项目中又引入了百度地图，所以我就打算通过使用百度地图来实现地址搜索功能啦。

本次教程可能过于啰嗦，所以这里先放上预览地址供大家预览——点我预览，也可到文末直接下载代码先自行体验。。。

ps: 又因为百度地图 1.2 以上需要 AK 密钥，所以这里我直接使用 1.2 版本实现

ps: 😐1.x版本是不能支持https的，所以使用时请注意

简单的说下实现的效果

因为我这边做的是打卡的地址选择，那么肯定要有搜索提示来选取地址啦，又因为是打卡，肯定的打卡的范围选择。为了用户体验，我们也要添加点击地图任意位置生辰对应的地址，也要可以拖拽标注来生成对应地址。

既然知道了功能点，那么我们就上效果图吧 😁

看到这，我们大概知道的功能点有：

设置图像标注并绑定拖拽标注结束后事件

绑定点击地图任意点事件

封装逆地址解析函数，用于通过坐标点获取详细地址

添加输入提示来选取地址

添加地图覆盖物(圆)，用于标识我们选择的范围

看到这里，是不是也想跃跃欲试啦，所以，我们就开始写我们的代码吧

搭建项目

因为，用到了vue，所以我们肯定安装vue-cli这个脚手架啦，又因为Vue3发布了正式版，所以这次我们的教程当然是使用Vue3进行开发啦，所以我们脚手架可能需要更新一下。

npm install -g @vue/cli

# OR

yarn global add @vue/cli

ps: 建议都更新下咯，避免无法创建 vue3 的项目

这里我们选择默认的配置就好了，如图:

若安装缓慢报错，可尝试用 yarn 或别的镜像源自行安装：rm -rf node_modules && yarn install。

在漫长的等他，他安装了我们的模板，从标题我们也知道，这里我们使用ant-design-vue啦，因为element-ui现在还没有支持Vue3，而element-plus的文档还是element-ui的，对我们十分不友好，支持的也不完善，所以我们这里直接使用ant-design-vue@2.x啦。

所以废话不多说了，直接安装依赖：

npm i --save ant-design-vue@next

安装完后我们就可以在main.js配置下我们的ant-design-vue了

import { createApp } from "vue";

import App from "./App.vue";

import Antd from "ant-design-vue";

import "ant-design-vue/dist/antd.css";

createApp(App).use(Antd).mount("#app");

ps：因为这里我们只是做个例子，所以我为了方便直接使用全局了

既然我们用了Vue3，我们就说说 Vue3 对比 Vue2 有什么更爽的点

Vue2 与 Vue3 的对比

对 TypeScript 支持更友好了，因为 Vue2 所有属性都放在了 this 对象上，难以推倒组件的数据类型。

同第一点，所有属性都放在了 this 对象上，难以实现 TreeShaking。

Template 终于支持多个根标签了，不需要每次写模板的时候都加上多余的根元素。

Composition Api，也是我们最听到的新功能(如果你用过React Hooks，那一定对它不陌生，因为它和React Hooks十分类似)，很多人也建议优先使用Composition Api来替代Mixins的写法，好处如下：

相关逻辑可以集中，且更容易复用

不会因为莫名的变数或方法名找半天，然后发现在Mixins

减少this指向问题

解决组件内的命名冲突

隐式依赖得到解决，你可以直观的看到消费组件所需要的变量

其它等等…

其它等等…

组合式 API

既然我们说了这么多 Composition Api 的优点，那么我们该怎么使用他呢？在 Vue 组件中，提供了一个setup的组件选项，并充当合成 API 的入口点。

ps: 由于在执行 setup 时尚未创建组件实例，即在 created 之前，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

使用setup函数是，他将接受两个参数，分别是props和context

Props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

ps: 因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性

上下文

context是一个普通的JavaScript对象，它暴露三个组件的 property：attrs、slots、emit

export default {

setup(props, context) {

// Attribute (非响应式对象)

console.log(context.attrs);

// 插槽 (非响应式对象)

console.log(context.slots);

// 触发事件 (方法) 同以前的 this.$emit()

console.log(context.emit);

},

};

context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用ES6解构。

export default {

setup(props, { attrs, slots, emit }) {

// ...

},

};

😢 因为我们不是Vue3基础入门，所以我这里就只讲用到的几个 API，另Vue3支持大多数Vue2的特性，所以我们用Vue2语法开发Vue3也是完全没问题的(🤣 开玩笑的)

ref 函数

闲话就不多说了，先来了解以下Composition Api的魅力吧。

在 Vue 3.0 中，我们可以通过一个新的ref函数使任何响应式变量在任何地方起作用。

并且ref返回的是一个对象值，该对像只包含一个 value 属性，且只有我们在setup函数进行