一、申请相关项目的ak

• 注意应用类别为浏览器端

二、在项目中安装依赖

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

三、引入、使用

<template>
    <div class="main">
        <div id="container"></div>
        <!-- 展示点击标记点数据组件 -->
        <div class="echartsClass" v-if="isshow">
            <DataDialog />
        </div>
    </div>
</template>

// js
<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader"

// 地图的变量赋值到外面,全局使用
const mymap = ref();// 地图删除,添加marker用
const myAMAP = ref();// 创建marker,icon等用
const isshow = ref(false); // 是否显示展示数据组件
// 所有的标记点
const myMarker = ref<any>([]);
const myText = ref<any>([]);

/**
 * 坐标集合的最西南角
 * @param {*} list
 *  list 是接口获取的点 的数组
 */
const getSW = (list: any) => {
    let south = null
    let west = null
    for (let item of list) {
        if ((west && item.longitude < west) || !west) {
            west = Number(item.longitude - 0.7)
        }
        if ((south && item.latitude < south) || !south) {
            south = Number(item.latitude - 0.7)
        }
    }
    return [west, south]
}

/**
 *  最东北角
 * @param {*} list
 */
const getNE = (list: any) => {
    let north = null
    let east = null
    for (let item of list) {
        if ((east && item.longitude > east) || !east) {
            east = Number(item.longitude + 0.7)
        }
        if ((north && item.latitude > north) || !north) {
            north = Number(item.latitude + 0.7)
        }
    }

    return [east, north]
}

//加载地图
const loadMap = () => {
    AMapLoader.load({
        key: "你自己的key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins:["AMap.ToolBar"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        // AMap.plugin([
        // 'AMap.ToolBar',
        // ], function(){
        //     // 在图面添加工具条控件, 工具条控件只有缩放功能
        //     map.addControl(new AMap.ToolBar());
        // });
        myAMAP.value = AMap;

        mymap.value = new AMap.Map("container", {  //设置地图容器id
            viewMode: "3D",    //是否为3D地图模式
            zoom: 10,           //初始化地图级别ing;
            center: [120.361221, 31.950912], //初始化地图中心点位置
            // mapStyle: 'amap://styles/blue'
        });
        // 声明一个数组，用来存放所有marker
        let allMarkerArr: object[] = []
        // 遍历数据数据，创建marker
        dataList.value.map((data) => {
            allMarkerArr.push({ longitude: data.longitude, latitude: data.latitude })

            //获取当前mn对应的那条数据 
            var text = new AMap.Text({
                text: data.title,
                anchor: 'center', // 设置文本标记锚点
                draggable: false,
                cursor: 'pointer',
                // angle: 10,
                zIndex: 999,
                style: {
                    // 'padding': '0',
                    'margin-bottom': '60px',
                    'border-radius': '8px',
                    // 'width': '15rem',
                    'border-width': 0,
                    'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                    'text-align': 'center',
                    'font-size': '12px',
                    'background-color': data.color,
                    'color': data.textColor
                },
                position: [data.longitude, data.latitude]
            });
            text.on('click', () => {
                isshow.value = true;
                console.log('点击文本')
            })

            text.setMap(mymap.value);
            // // 创建一个 Icon
            myStartIcon.value = new AMap.Icon({
                // 图标尺寸
                // size: new AMap.Size(25, 25),
                // 图标的取图地址
                image: data.imgurl,
                // 图标所用图片大小
                imageSize: new AMap.Size(30, 30),
                // 图标取图偏移量
                // imageOffset: new AMap.Pixel(-9, -3)
            });

            //地图的点位
            const marker = new AMap.Marker({
                zIndex: 999,
                position: new AMap.LngLat(data.longitude, data.latitude),
                title: data.title, // 鼠标滑过点标记时的文字提示
                icon: myStartIcon.value, // 引入上面的图片
                offset: new AMap.Pixel(-15, -15),
            })

            myMarker.value.push(marker)//添加点
            myText.value.push(text)//添加文本节点

            // 窗口信息
            const infoWindow = new AMap.InfoWindow({
                isCustom: true, // 自定义窗口,窗口外框以及内容完全按照content所设的值添加
                closeWhenClickMap: true, // 是否在鼠标点击地图关闭窗口
                // content: markerContent.value,
                content: creatContent(),
                offset: new AMap.Pixel(0, -15)
            })

            myinfoWindow.value = infoWindow;
            // 给marker添加click事件
            marker.on("click", () => {
                isshow.value = true;
                console.log('marker')
            })
            // 给new AMap添加zoomend事件,当缩放级别时触发
            mymap.value.on("zoomend", () => {
                // 关闭信息窗体
                mymap.value.clearInfoWindow(infoWindow);
                isshow.value = false;
            })

            mymap.value.on('click', () => {
                isshow.value = false;
            })

            marker.setMap(mymap.value);
            }
        })
        const sw = getSW(allMarkerArr) // 循环所有的点标记，返回最西南的一个经纬度
        const ne = getNE(allMarkerArr) // 循环所有的点标记，返回最东北的一个经纬度
        // 根据最西南经纬度和最东北经纬度调整窗口，让所有点位都在窗口内显示
        var mybounds = new AMap.Bounds(sw, ne) // sw, ne > [xxx,xxx], [xxx,xxx]
        mymap.value.setBounds(mybounds)
    }).catch(e => {
        console.log(e);
    })
}
</script>

// 样式
<style scoped>
#container{
    padding:0px;
    margin: 0px;
    width: 100vh;
    height: 80vh;
}
</style>