使用Vue3调用高德地图接口（基于后端同学想搞前端地图的手把手式教程）

 首先我们先按照官方文档进行操作

安装地图Loader

 npm i @amap/amap-jsapi-loader --save

创建一个vue文件之后

创建地图容器

设置地图容器样式

#container{  padding:0px;  margin: 0px;  width: 100%;  height: 800px;}

引入Loader

import AMapLoader from '@amap/amap-jsapi-loader';

初始化Map（基于vue3及setup语法糖）

import AMapLoader from '@amap/amap-jsapi-loader';import {shallowRef} from "vue";const map = shallowRef(null);

创建地图并调用初始化方法

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()})

效果：

 

添加标记 

 按照官方文档我们知道，创建标记实例需要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 虚构世界与现实世界的连接点——关于《三色绘恋》等游戏的原型地圣地巡礼 - 哔哩哔哩