前言

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

思路清晰，抽丝剥茧

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

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

必要的准备工作

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

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

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

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

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

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

import axios from "axios";
import AMapLoader from '@amap/amap-jsapi-loader';
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from '@vue/reactivity';
import { ref} from "vue";let map = shallowRef(null);
window._AMapSecurityConfig = {securityJsCode: '147869u22d52419ca59be97dc09cb84e',        //安全密钥
}
AMapLoader.load({key: "0aec037b51a312k1213942cb307e4d0a2", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {})

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

最简单的部分

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

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

.then((AMap) => {})

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

     map = new AMap.Map("container", {  //设置地图容器idviewMode: "2D",    //是否为3D地图模式zoom: 10,           //初始化地图级别center: [83.28636635754393, 45.44533368853938], //初始化地图中心点位置mapStyle: 'amap://styles/normal'});

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

处理数据之前（最关键的思路）

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

const arrmap = ref([])

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

        marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [116.406315, 39.908775],offset: new AMap.Pixel(-13, -30)});

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

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

         marker.setLabel({direction: 'right',offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量content: arrmap.value.tab[key].name, //设置文本标注内容});

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

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

效果

完整代码

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

⭐⭐⭐vue文件中template部分：

<template><div class="app-container"><div style="background-color: #ffffff;"><div id="container"></div></div></div>
</template>

⭐⭐⭐vue文件中script部分：

<script setup>
import axios from "axios";
import AMapLoader from '@amap/amap-jsapi-loader';
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
import { shallowRef } from '@vue/reactivity';
import { ref } from "vue";
const arrmap = ref([])axios({url: "api/science/map", // urlparams: {scienceid: 1,tabid: id},
}).then(function (res) {console.log(res.data);arrmap.value = res.data;console.log(arrmap.value);initMap()})// 异常回调函数.catch(function (err) {console.log(err);});const initMap = () => {let map = shallowRef(null);window._AMapSecurityConfig = {securityJsCode: '147869e22d52319ca59be97dc09cb84e',        //安全密钥}AMapLoader.load({key: "0aec037b51a31b2825942cb307e4d0a2", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {map = new AMap.Map("container", {  //设置地图容器idviewMode: "2D",     //是否为3D地图模式zoom: 10,           //初始化地图级别center: [83.28636635754393, 55.44533368853938], //初始化地图中心点位置// mapStyle: 'amap://styles/whitesmoke'mapStyle: 'amap://styles/normal'});console.log(arrmap.value.tab[0].lat);  //随便打印一下，看能不能获取到console.log(arrmap.value.tab[0].lng);// 循环接口中的点的经纬度数组，目的是为了将经纬度放在点标记中，让这个点变成活的。数据变，点的位置也变。有几个点，地图上显示几个点for (const key in arrmap.value.tab) {      //arrmap.value.tab是存放点的数组console.log(arrmap.value.tab[key].lng);if (arrmap.value.tab[key].lat != null && arrmap.value.tab[key].lat != '' && arrmap.value.tab[key].lng != null) {var marker = new AMap.Marker({position: new AMap.LngLat(arrmap.value.tab[key].lng, arrmap.value.tab[key].lat),//不同标记点的经纬度map: map});}marker.setLabel({direction: 'right',offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量content: arrmap.value.tab[key].name, //设置文本标注内容});}// -------------------------------// 将创建的点标记添加到已有的地图实例：map.add(marker);}).catch(e => {console.log(e);})
}
</script>

vue3实现高德地图多点标注（so easy）相关推荐

【vue3引入高德地图】
vue3引入高德地图文章目录 vue3引入高德地图前言一.准备工作 1.开发文档 2.添加应用二.使用步骤 1.npm 安装 2.地图容器创建 3.组件引入 4.js api 安全密钥 5.初 ...
高德地图的标志放大_高德地图点标注的分布与缩放
本文介绍了在 React Native 平板开发中使用高德地图组件的一个案例,重点介绍了如何计算并缩放到所需状态,以及地图 Webview 与 React Native 通信的方式. 欢迎关注我的专栏 ...
百度地图 php,php+js实现百度地图多点标注的方法
本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->selec ...
移动端百度地图多点标注php,PHP学习：php+js实现百度地图多点标注的方法
<PHP学习:php+js实现百度地图多点标注的方法>要点: 本文介绍了PHP学习:php+js实现百度地图多点标注的方法,希望对您有用.如果有疑问,可以联系我们. PHP教程 PHP教程 ...
php 高德地图创建标注,使用高德地图API生成带标的专属地图
1. 准备工作 1.1 申请地图APIKEY 首先,你得注册一个高德账号或者你得有个某宝账号. 访问 http://lbs.amap.com/dev/ 在我的应用中创建一个新应用. 点击"添 ...
前端系列19集-vue3引入高德地图，响应式，自适应
npm i @amap/amap-jsapi-loader --save import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAP ...
vue3 引入高德地图实例
vue3高德地图进阶版地图引入进阶文章末尾有完整代码关于vue项目如何引入高德地图以及一些基础用法见上一篇文章
移动端百度地图多点标注php,百度地图API多重打点标注
因为之前的html地图页面,所以去找了很多Demo和代码来学习,其中有一个Demo,不知道出处但是最后用了他的方法来处理百度地图的多重打点并且显示标注信息的方法,具体代码我就不贴了,去搜索:百度地图A ...
Swift之高德地图自定义标注弹出气泡样式
在用到地图类的sdk,sdk自带的样式必定不能满足开发者的需求,于是开发者不得不进行自定义,由于官方同样是object-c 版语法,不得不将其转为swift语法,以满足项目需求. 新建两个类 Cust ...

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