productivity-platform-web/src/components/MapContainer/index.vue

<template>
    <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import markPNG from "../../assets/icons/mark.png"

export default {
    name: "map-view",
    mounted() {
        //this.initAMap();
    },
    unmounted() {
        this.map?.destroy();
    },

    props: {
        targetPoint: {
            type: Array,
            Required: false
        }
    },

    watch:{
        targetPoint:{
            handler(nv){
                this.map?.destroy();
                this.initAMap();
            },
            immediate:true
        }
    },

    created() {

    },
    methods: {
        initAMap() {
            window._AMapSecurityConfig = {
                securityJsCode: "522c082a4dfbb2b5555c7b1d3ff453b8",
            };
           
            AMapLoader.load({
                key: "78291dcbd623bd91a9d00754bab6c29b", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MapType", "AMap.ElasticMarker"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
            }).then((AMap) => {
                var zoomStyleMapping = {
                    14: 0,
                    15: 0,
                    16: 0,
                    17: 0,
                    18: 0,
                    19: 0,
                    20: 0,
                };
                this.map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 15, // 初始化地图级别
                    center: this.targetPoint[0].lngLat.split(",") // 初始化地图中心点位置
                });
                var toolbar = new AMap.ToolBar(); //创建工具条插件实例
                this.map.addControl(toolbar); //添加工具条插件到页面
                var scale = new AMap.Scale();
                this.map.addControl(scale);
                var mapType = new AMap.MapType();
                this.map.addControl(mapType);

                for (let i in this.targetPoint) {
                    var stylesArray = [
                        {
                            icon: { //图标样式
                                img: markPNG,
                                size: [50, 50], //图标的原始大小
                                anchor: "bottom-center", //锚点位置
                                fitZoom: 0, //最合适的级别 在此级别显示为图标原始大小
                                scaleFactor: 1, //地图放大一级的缩放比例系数 
                                maxScale: 1, //图片的最大放大比例，随着地图放大图标会跟着放大，最大为2
                                minScale: 1, //图片的最小缩小比例，随着地图缩小图标会跟着缩小，最小为1
                            },
                            label: { //文本标注
                                content: this.targetPoint[i].location, //文本内容
                                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                                minZoom: 0, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                            },
                        },
                    ];
                    //设置圆形位置
                    var center = new AMap.LngLat(this.targetPoint[i].lngLat.split(",")[0],this.targetPoint[i].lngLat.split(",")[1]);
                    //设置圆的半径大小
                    var radius = 1000;

                    //创建圆形 Circle 实例
                    var circle = new AMap.Circle({
                        center: center, //圆心
                        radius: radius, //半径
                        borderWeight: 1, //描边的宽度
                        strokeColor: "#ff6154", //轮廓线颜色
                        strokeOpacity: 0.5, //轮廓线透明度
                        strokeWeight: 1, //轮廓线宽度
                        fillOpacity: 0.2, //圆形填充透明度
                        strokeStyle: "dashed", //轮廓线样式
                        fillColor: "#ff6154", //圆形填充颜色
                        zIndex: 50, //圆形的叠加顺序
                    });
                    var elasticMarker = new AMap.ElasticMarker({
                        position: this.targetPoint[i].lngLat.split(","), //点标记位置
                        styles: stylesArray, //指定样式列表
                        zoomStyleMapping: zoomStyleMapping, //指定 zoom 与样式的映射
                        clickable:true
                    })
                    this.map.add(elasticMarker); //添加到地图上
                    this.map.add(circle);
                    this.map.setFitView(); //缩放地图到合适的视野级别

                    //鼠标移入事件
                    // circle.on("click", function () { 
                    //     console.log("鼠标点击");
                    // });       

                }
            })
            .catch((e) => {
                console.log(e);
            });
        
        },

        collectInfo(){

        }

    },
};
</script>
<style scoped>
#container {
    width: 100%;
    height: 600px;
}

.custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
}
</style>