vue3实现高德地图多点标注（so easy）

非常感谢你能打开这篇博客，我想你一定是遇到了地图多点标注有关的问题。 这些问题对你造成一些困扰，我希望本篇博客能给你带来帮助。 首先，地图多点标注是个非常简单的问题，你不要烦躁，让自己静下来去跟着我的思路走一遍。

第一步：我们先搞个地图出来，专业一点说叫实例化一个地图实例。（这一步极其重要） 第二步：我们在地图上搞个点出来，专业一点说这叫marker点标记。（这一步极其重要） 第三步：我们给这个点设置对应的文字提示 第四步：将经纬度数组循环出来，换句话说，把数组里面的点循环出来。（这一步很重要） 第五步：刚刚地图上搞的那个点，那个点的经纬度死数据再换成数组里的经纬度活数据。（这一步很重要）

⭐其余的很简单了，最重要的就是第一步和第二步了，只要第一步，第二步能完成，其余的是没有难度的。 ok，我们顺着思路走一遍。。。

⭐地图怎么搞？ 有百度地图，有高德地图，有腾讯地图，用哪个都行。

但这里我会选择高德地图，因为高德地图定位误差小。

好，打开高德地图开放平台

没有账号的注册一个（主要是为了后面的key值，不注册账号你就没有key值）。 有账号的，我们打开以下页面，并点击进入，按如图步骤操作就完事了。 key值在控制台内。打开控制台，点击管理key，就可以查看key值和安全密钥了。

这个页面内左边是各种API，右边是对应API的代码。

⭐⭐⭐⭐这些代码都是原生js的，由于我们是vue3中实现此功能，所以需要一点小小的操作。 我用vue3语法糖。 也就是标签 我们要在标签内进行vue3写法的处理，所以必须在标签内引入以下一大堆东西：

至此，准备工作已经做完。

最简单的部分是指不需要思考的。 这部分也就是第一步和第二步 我们只需要将示例里的代码复制过来即可。

⭐⭐⭐最重要的是，关于后续的从高德地图api里拿到的所有功能对应的代码，都应该放在以下函数里面。

实例化一个地图，就用这句话：

搞一个点标记，就用这句话：

声明个变量，来将接口中的数据放进去

这一步还为了将多个点对应的经纬度获取到，并放在position：[ 经度，纬度 ]里。 因为从高德地图api里得到是如下代码：

这里面的position就是放点的经纬度的。

除了把接口中的点的经纬度数据放在position里，我们还需要给不同的点设置相应的文本提示。这个时候我们需要用这句话。

很明显，点标记，以及对应的文字提示，都应该是来自接口的数组中。所以我们必须把这两段代码写在循环里面。这样下去，接口有多少点，都将会渲染到到地图上。

至此，vue3高德地图多点标注功能完成

⭐按照上面的思路，我们一步步去完成了这个功能。最终我将完整代码放在这里，可以直接用。 但需要根据自己的需求改接口路径，数组名称

⭐⭐⭐vue文件中template部分：

⭐⭐⭐vue文件中script部分：