第三方地图——高德地图

1. 需要在高德地图开放平台创建一个账号。

https://lbs.amap.com/api/javascript-api-v2/prerequisites

2. 添加一条key并且选择web端，创建好后下面就有key简称值在vue集成的时候需要高德需要和安全密钥一起使用（必须一起）

2. 打开vue下载一个依赖组件

npm install @vuemap/vue-amap@legacy --save

然后在main.js中引入地图（key需要改）

安装 (guyixi.cn)

vue-amap 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。

进入后将上面代码引入组件开始使用

部分属性：

自定义地图组件

首先需要导入 registerMixin，再methods中创建一个__initComponent方法，该方法是子组件被创建时调用，可以使用parentInstance.$amapComponent获取到上级组件的实例对象

新建一个text.vue组件，在里面写入一下代码

parentInstance通过provide为所有子组件提供实例，parentInstance指向的是最近的一个提供【parentInstance】的vue组件

这是地图加载代码

效果：