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

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

安装地图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?虚构世界与现实世界的连接点——关于《三色绘恋》等游戏的原型地圣地巡礼 - 哔哩哔哩