聊聊vue3中怎么使用高德地图api

在我们使用高德地图的时候，官方给我们推荐了很多案例，，但是这些案例都是使用原生方法接入，并没有提供或者 的，的 接入网上也很多人都有写过，下面本篇文章就来看看 怎么使用常用的高德地图，希望对大家有所帮助！demovuereactdemovue2vue3api

前置工作

在开发之前我们需要了解 中接入高德地图的几个步骤 vue3

• 首先安装包并引入

登入後複製登入後複製

• 使用进行加

vue2 和 是有区别的，这里我们使用的是 ，但这里的方式还是选项式，不是组合式的，我自己写的时候使用的是组合式的，且整合了， 我后面释出完整 档案的时候 会去掉标签上的 ts，因为型别还没有完善，等后面完善了再贴更改以后得。 为什么要使用 官方也给出了说明原因。 【相关推荐：、】vue3vue3vue3 ts.vueshallowRef

范例模块

这里我直接把我前面，写过的 地图业务需求的业务逻辑拿过来的，没有使用框架，直接在一个 html 档案当中引入，链接大家可以点击下面进行查看：





使用 的时候，范例化的方式， 的问题， 以及插入字串模板的时候 事件响应的方式都需要更改，还是很麻烦的 vue3this

模组的引入

• 首先导入的方式，和官网一样，后面我会贴完整代码， 这里我们使用 加载外挂， 其他设置如 ， 直接进行设定， 这里需要注意版本问题， 写成 '2.0' 是不行的，初始化函数在 生命周期中执行。pluginsLocaonmounted

• AMap储存 这里我做了很多储存，大家知道 的语法是 获取 的语法，我下面使用到的 都是，后面完整代码可以检视， 这里挂载的时候直接存一下，因为很多工具方法都会只用到他，这里后期业务逻辑我会抽离到 中去，所以不需要在初始化函数中写全部的业务逻辑。.valuevue3refrefpinia

• 模版样式不生效问题， 我们在使用的时候， 就像我之前写的文章，点位新增的时候，我们会插入 字串模版，替换点样式，这里有两种方案修改样式，一种是 插入 ，不使用字串，然后在 上通过 直接修改样式，另一种就是使用模版的时候直接给 类名，但是这种样式如果我们给 的 加了 就不会生效，这里大家可以自己灵活选择用哪种， 我这里暂时先使用模版的方式，去掉了 。content DOMDOM styleclassvuestylescopedscoped

• 图例， 图例这里除了导入的时候，需要设定一下，使用上来说变化不大，样式的修改还是复用了我之前的逻辑。

登入後複製

右键菜单

右键菜单， 右键菜单这里官方给我们的范例是使用一个 函数 进行范例化，里面使用了 ， 所以这个我单独拿出来，首先我们看一下官方的 this

• 这里使用了一个函数，但这个函数还不是类，但是他却在里面使用了，实话来讲，这种写法确实不是很优秀，可延伸性很差，不够健壮，但没办法，谁让我们用了人家的东西呢是吧， 在 中这么用就不可以了，首先 里面使用 就不是官方建议的， 另外这里面还修改了函数原型上的方法，其实我得代码里面一共有两种右键选单，如下：thisvue3vue3this

一种是在指定点位上开启，另一种是在非点位的空白处开启，指定点位处开启的其实叫信息表单，只不过是通过右键的方式触发，那个没有上面这个右键菜单麻烦。

• 首先来说 问题， 这里的 实际上就是把我们的范例化对象挂载到上面而已， 中没办法像 那样使用 ， 但也提供给我们了 来获取当前元件的范例化对象， 然后我没用使用函数， 使用了一个类，类构造这个方法， 模版也不适用字串模版，因为这里字串模版的事件系结写死了，我们使用 来动态绑定事件，代码如下：thisthisvue3vue2thisapiDOM

登入後複製

完整代码

登入後複製

• 这里的业务逻辑还不完善， 输入部分的交互逻辑没有完成， 这个档案直接引入自己的项目，安装一下上面说过的依赖， 就可以使用，不过这里数据来源需要自己根据自己的数据来构造就可以了，我引入的事 中的一组假资料，在这里给大家两组看一下data

登入後複製

• 后面我会把业务逻辑抽离到 中， 并且完善型别， 大家对哪一部分有疑问或者更好的解决方案可以留言一起学习