Vue(3). 如何将高德地图引入的vue中

1.首先需要进入高德地图平台 注册账号获取KEY

2.在vue终端里输入

npm i @amap/amap-jsapi-loader --save
# 或
cnpm i @amap/amap-jsapi-loader --save

3.另一种方式是传统的<script>，但不建议，需要的可以看官方了。

4. 在需要的组件中创建一个容器，确定高宽：

<divid="container"style="height: 800px;width: 800px;"></div>

导入

importAMapLoaderfrom'@amap/amap-jsapi-loader';

并在setup()/mounted()中加载：

import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
import qs from 'qs';
// import router from '@/router';
import {
    useRouter,
    useRoute
} from "vue-router";
import { ref } from 'vue'
// import { times } from 'lodash';
const router = useRouter();
const route = useRoute();
const active = ref([0]);
const tabDatas = ref([])
const regions = ref([])
const regionss = ref([])
const lng_lst = ref([])
const minimg = ref('')

axios({
    method: "post", //请求方式
    url: "域名", //url
    data: qs.stringify({
        // 参数
        scienceid: route.query.id,
    }),
}).then((res) => {
    console.log(res.data); //成功回调
    tabDatas.value = res.data.data
    minimg.value = res.data.data;
    console.log(minimg.value);
})
const Togget = (id) => {
    console.log(minimg.value[id].minimg);
    console.log(id);
    axios({
        method: "post", //请求方式
        url: "域名", //url
        data: qs.stringify({
            // 参数
            scienceid: route.query.id,
            tabid: tabDatas.value[id].id,
        }),
    }).then((res) => {
        console.log(res.data); //成功回调
        lng_lst.value = res.data.data
        console.log(lng_lst.value[0].lng);

        AMapLoader.load({
            "key": "cb43e9e4ae1d541c13c5565173e5563d",                                          // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "1.4.15",                                // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],                                      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {                                         // 是否加载 AMapUI，缺省不加载
                "version": '1.1',                               // AMapUI 缺省 1.1
                "plugins": [],                                   // 需要加载的 AMapUI ui插件
            },
            "Loca": {                                            // 是否加载 Loca， 缺省不加载
                "version": '1.3.2'                              // Loca 版本，缺省 1.3.2
            },
        }).then((AMap) => {
            var map = new AMap.Map('container', {
                resizeEnable: true,
                // center: [res.data.data[i].lng, res.data.data[i].lat],
                center: [lng_lst.value[0].lng, lng_lst.value[0].lat],                 //中心点坐标
                zoom: 12
            });
            let lngg = []
            for (let i = 0; i < res.data.data.length; i++) {
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(Number(lng_lst.value[i].lng), Number(lng_lst.value[i].lat)), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    // center: [lng_lst.value[i].lng, lng_lst.value[i].lat],                 //中心点坐标
                    icon: minimg.value[id].minimg,
                    anchor: 'bottom-center',
                    offset: new AMap.Pixel(0, 0),
                    imageSize: new AMap.Size(1, 1)   // 根据所设置的大小拉伸或压缩图片
                });
                // marker.setMap(map);
                // 设置鼠标划过点标记显示的文字提示
                // marker.setTitle('我是marker的title');

                // 设置label标签
                // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                marker.setLabel({
                    direction: 'right',
                    offset: new AMap.Pixel(-55, -40),  //设置文本标注偏移量
                    content: `<div class='info'>
                        <div>
                            <p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.data[i].name + `</b></p>
                            
                        </div>
                    </div>`, //设置文本标注内容
                    // <p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.tab[i].create_time + `</b></p>
                });
                lngg.push(marker);
            }
            map.add(lngg)
        }).catch(e => {
            console.log(e);
        })
    })
}

const upPage = () => {
    router.push({
        name: 'HomeView'
    })
}

把key值更改为自己在创建地图时的key值

详细教程查看官方文档(都是官方的那一套)