首先我们先按照官方文档进行操作
安装地图Loader
npm i @amap/amap-jsapi-loader --save
创建一个vue文件之后
创建地图容器
<template> <div id="container"></div></template>设置地图容器样式
<style scoped>#container{ padding:0px; margin: 0px; width: 100%; height: 800px;}</style>引入Loader
<script setup>import AMapLoader from '@amap/amap-jsapi-loader';</script>初始化Map（基于vue3及setup语法糖）
<script setup>import AMapLoader from '@amap/amap-jsapi-loader';import {shallowRef} from "vue";const map = shallowRef(null);</script>创建地图并调用初始化方法
<script setup>import AMapLoader from '@amap/amap-jsapi-loader';import {shallowRef, onMounted} from "vue";const map = shallowRef(null);//初始化地图方法const initMap = ()=>{ AMapLoader.load({ key:"YOURKRY", // 申请好的Web端开发者Key，首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins:[], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ map.value = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:5, //初始化地图级别 2-20 center:[105.602725,37.076636], //初始化地图中心点位置 }); }).catch(e=>{ console.log(e); })}//页面挂载完成onMounted(()=>{ //调用初始化方法 initMap()})</script>效果：
添加标记
按照官方文档我们知道，创建标记实例需要AMap，而AMap在初始化地图方法里，所以我们需要用一个变量接出来
//备份AMap对象，以便操作let MYAMap = null//初始化地图方法const initMap = ()=>{ AMapLoader.load({ key:"YOURKRY", // 申请好的Web端开发者Key，首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins:[], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((AMap)=>{ MYAMap = AMap //在这里添加 map.value = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:5, //初始化地图级别 2-20 center:[105.602725,37.076636], //初始化地图中心点位置 }); }).catch(e=>{ console.log(e); })}之后创建标记：
const marker = new MYAMap.Marker({ position: //希望它出现的位置 title: //标记名字});//加进地图里map.value.add(marker)效果：
给标记创建点击事件并创建信息框
marker.on('clice',function (e){ //创建并打开一个信息框 var infoWindow = new MYAMap.InfoWindow({ content: '',//在框内显示的内容，传入dom对象或者html字符串 offset: new MYAMap.Pixel(0,-30), //信息框出现的位置进行偏移 }); infoWindow.open(map.value,需要出现的位置);//一定要在自己想要的地图里出现})之后点击标签就可以有效果了
相关图片出处：bilibili 作者：萤火rise 虚构世界与现实世界的连接点——关于《三色绘恋》等游戏的原型地圣地巡礼 - 哔哩哔哩