<script setup>
import AMapLoader from "@amap/amap-jsapi-loader"
import { ref } from "vue";
defineProps({

})
function initMap() {
    window._AMapSecurityConfig = {
        securityJsCode: '8e920f73eb2e6880a92ea6662eefc476',
    }
    AMapLoader.load({
        key: "e4e3d44a98350790a1493450032bbec5", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        const map = new AMap.Map("container", {  //设置地图容器id
            viewMode: "3D",    //是否为3D地图模式
            zoom: 4,           //初始化地图级别
            center: [104.06, 35.67], //初始化地图中心点位置
        });
        // generatePoints().forEach((item) => {
        //     const marker = new AMap.Marker({
        //         position: new AMap.LngLat(item.position[0], item.position[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //         title: '北京'
        //     });

        //     // 将创建的点标记添加到已有的地图实例：
        //     map.add(marker);
        // })
        var style = [{
            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
        }, {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(7, 7)
        }, {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
            anchor: new AMap.Pixel(3, 3),
            size: new AMap.Size(5, 5)
        }
        ];

        var mass = new AMap.MassMarks(citys, {
            opacity: 0.8,
            zIndex: 111,
            cursor: 'pointer',
            style: style
        });

        var marker = new AMap.Marker({ content: ' ', map: map });

        mass.on('mouseover', function (e) {

            marker.setPosition(e.data.lnglat);
            marker.setLabel({ content: e.data.name })
        });

        mass.setMap(map);
    }).catch(e => {
        console.log(e);
    })
}

initMap()
function generatePoints() {
    const points = [];
    for (let i = 0; i < 400; i++) {
        const position = [
            73.66 + Math.random() * 53.55, // 经度范围：73.66°E ~ 135.21°E
            18.16 + Math.random() * 53.55  // 纬度范围：18.16°N ~ 53.70°N
        ];
        points.push({ position });
    }
    return points;
}

</script>

<template>
    <div class="greetings">
        <div id="container"></div>
    </div>
</template>

<style scoped>
#container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
</style>
