使用高德地图绘制区域及标题(vue 2)

public / index.html引入地图组件

 <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=f86393ef104bfc7ac7ea352a98d4b371&plugin=AMap.MouseTool&plugin=AMap.ControlBar&plugin=AMap.Geolocation&plugin=AMap.PolyEditor&plugin=Map3D,AMap.DistrictSearch"></script>

使用组件

//地图组件

<div id="map"></div>

地图 全屏/小屏 设置

<div class="fullMap">
                <p :class="isFull?'full2':'full1'" @click="isFull=true">全屏</p>
                <p :class="isFull?'full1':'full2'" @click="isFull=false">小屏</p>
            </div>
//css less语法 
功能 相对于地图定位
.fullMap {
            position: absolute;
            right: 3%;
            bottom: 10%;
            color: #afddf3;
            display: flex;
            align-items: center;
            width: 5rem;
            height: 1.4rem;
            font-size: 0.65rem;
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid #0d5b8d;
            border-radius: 0.7rem;
            cursor: pointer;
            z-index: 1000;

            p {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .full1 {
                width: 48%;
            }

            .full2 {
                width: 52%;
                height: 100%;
                background-color: #0d5b8d;
                border-radius: 0.7rem;
            }
        }

编写组件内容(vue)

initMap() {
        let _this = this;
        //设置地图
        this.map = new AMap.Map("map8Container", {
            center: [this.lng, this.lat],
            // zooms: [4, 18],//设置地图级别范围
            zoom: Number(this.zoom) || Number(this.synthesisDataScale),
            resizeEnable: true,
            rotateEnable: true,
            pitchEnable: true,
            pitch: 0,
            rotation: 0,
            // viewMode: "3D", //开启3D视图,默认为关闭
            buildingAnimation: false, //楼块出现是否带动画
            expandZoomRange: true,
            mapStyle: 'amap://styles/b614b20c337fa36700286089982f8561'
        });
        // 3D地图设置光照
        this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
        this.map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
        //添加切换2d 3d工具
        // this.map.addControl(
        //     new AMap.ControlBar({
        //         showZoomBar: false,
        //         showControlButton: true,
        //         width: "100px",
        //         height: "100px",
        //         position: {
        //             right: "10px",
        //             bottom: "20px",
        //         },
        //     })
        // );

        let options = {
            showButton: false, //是否显示定位按钮
            buttonPosition: "LB", //定位按钮的位置
            /* LT LB RT RB */
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
            showMarker: true, //是否显示定位点
            markerOptions: {
                //自定义定位点样式，同Marker的Options
                offset: new AMap.Pixel(-7, -15),
                content:
                    '<div class="selfLocaltion">' +
                    // '<p style="color:#fff">这是定位点</p>' +
                    '<div class="point point-flicker"></div>' +
                    "</div>",
            },
            showCircle: false, //是否显示定位精度圈
        };
        //定位按钮添加到地图
        AMap.plugin(["AMap.Geolocation"], function () {
            let geolocation = new AMap.Geolocation(options);
            _this.map.addControl(geolocation);
            // geolocation.getCurrentPosition()
        });
        this.map.on('zoomchange', (e) => {
            //获取当前最新的地图层级
            this.zoom = this.map.getZoom();
        })
        //有数据时 进行地图区域绘制
        if (this.module8Data.list && this.module8Data.list.length !== 0) {
            let wgList = this.module8Data.list;
            this.addPolygonArr(wgList);
        }
        //有任务轨迹是,进行运动轨迹绘制
        if (this.module8DataTraceList && this.module8DataTraceList.length > 0) {
            this.module8DataTraceList.forEach(f => {
                let gradeLineList = [];
                f.list.forEach(m => {
                    if (m.latitude && m.longitude) {
                        gradeLineList.push([m.longitude, m.latitude])
                    }
                })
                this.trackMapGrade(gradeLineList);
            })

        }
    },

    //绘制任务运动轨迹
    trackMapGrade(jwArr) {
        //人物定位点
        this.marker = new AMap.Marker({
            position: new AMap.LngLat(jwArr[0][0], jwArr[0][1]),
            offset: new AMap.Pixel(-18, -74),
            content: `<img style="width: 36px" src="${this.imgs.hly}" />`,
        });

        this.map.add(this.marker);
        //绘制运动前轨迹
        this.polyline = new AMap.Polyline({
            map: this.map,
            path: jwArr,
            showDir: true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });
        //绘制运动后轨迹
        this.passedPolyline = new AMap.Polyline({
            map: this.map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });
        //人物运动
        let passedPolyline = this.passedPolyline;
        this.marker.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
        });
        this.map.setFitView();
        //计算人物运动速度
        this.startAnimation(jwArr);
    },
    startAnimation(jwArr) {
        // 计算速度
        this.marker.moveAlong(jwArr, 0.5 * 500);
    },

    //处理数据 进行区域绘制
       addPolygonArr(wgList) {
            let _this = this;
            this.object3Dlayer = new AMap.Object3DLayer();
            this.map.add(this.object3Dlayer);
            this.polygonArr = [];
            let wgNameLocalArr = [];
            for (let i = 0; i < wgList.length; i++) {
                if (wgList[i].scope !== null) {
                    let itemScope = JSON.parse(wgList[i].scope)
                    //添加网格名
                    wgNameLocalArr.push({
                        loca1: wgList[i].areaCenterCoordinate,
                        loca2: wgList[i].name,
                        loca3: wgList[i].areaTitleColor
                    });
                    for (let j = 0; j < JSON.parse(wgList[i].scope).length; j++) {
                        let path = [];
                        let opacity = 0.1;
                        for (let k = 0; k < JSON.parse(wgList[i].scope)[j].length; k++) {
                            path.push([JSON.parse(wgList[i].scope)[j][k].lng, JSON.parse(wgList[i].scope)[j][k].lat]);
                            if (wgList[i].opacity) {
                                opacity = JSON.parse(wgList[i].opacity)[j];
                            }
                        }
                        let polygon = new AMap.Polygon({
                            path: path,
                            strokeColor: wgList[i].scopeColor,
                            strokeWeight: 1,
                            strokeOpacity: opacity,
                            fillOpacity: opacity,
                            fillColor: wgList[i].scopeColor,
                            zIndex: 50,
                            extData: {
                                //自定义的数据
                                // id: wgList[i].id,
                                object: wgList[i],
                            },
                        });
                        //绑定区域点击事件
                        polygon.on("click", _this.clickArea);
                        this.map.add(polygon);
                        this.polygonArr.push(polygon);

                        var polyline = new AMap.Polyline({
                            path: path,
                            isOutline: true,
                            outlineColor: wgList[i].scopeColor,
                            borderWeight: 1,
                            strokeColor: wgList[i].scopeColor,
                            strokeOpacity: 1,
                            strokeWeight: 1,
                            // 折线样式还支持 'solid'
                            strokeStyle: "dashed",
                            // strokeStyle是dashed时有效
                            strokeDasharray: [10, 5],
                            lineJoin: 'round',
                            lineCap: 'round',
                            zIndex: 50,
                        })
                        polyline.setMap(this.map)
                    }
                    var height = 600;
                    for (let j = 0; j < itemScope.length; j++) {
                        let bounds = []
                        let bounds2 = []
                        itemScope[j].forEach(f => {
                            bounds2.push(new AMap.LngLat(f.lng, f.lat))
                        })
                        bounds.push(bounds2)
                        var prism = new AMap.Object3D.Prism({
                            path: bounds,
                            height: height,
                            color: "rgba(98,207,3,0.2)"

                        });

                        prism.transparent = true;
                        this.object3Dlayer.add(prism);//添加

                    }
                }
            }
            //监听地图缩放等级
            //检查默认是否显示名字
            let zoom1 = _this.map.getZoom();
            if (zoom1 >= 14) {
                _this.mapZoom(wgNameLocalArr, 1);
            } else {
                _this.mapZoom(wgNameLocalArr, 2);
            }
            this.zoomchangeListener = AMap.event.addListener(_this.map, "zoomchange", function () {
                let zoom2 = _this.map.getZoom();
                //获取当前地图级别
                if (zoom2 >= 14) {
                    _this.mapZoom(wgNameLocalArr, 1);
                } else {
                    _this.mapZoom(wgNameLocalArr, 2);
                }
            });
        },

    //点击区域跳转下一级
    clickArea(e) {
        // this.map.setZoomAndCenter(Number(this.gridElementScale), [this.lng, this.lat]);
        //点击社区级别
        this.lat = this.map.getCenter().lat;
        this.lng = this.map.getCenter().lng;
        let id = e.target.getExtData().object.id;
        if (this.type == 2) {
            this.committee = e.target.getExtData().object.committee;
        } else if (this.type == 3) {
            this.committee = e.target.getExtData().object.committee;
            this.gridName = e.target.getExtData().object.wgName
            this.wgId = e.target.getExtData().object.wg_id
        } else if (this.type == 4) {
            this.committee = e.target.getExtData().object.committee;
            id = e.target.getExtData().object.wgId;
            this.gridName = "";
            this.wgId = ""
            this.wgyId = ""
            this.isOpen = true;
        }

        if (this.ZhArea && !this.committee) {
            //点击居委会
            this.queryMapData(2, e.target.getExtData().object.name);
            this.ZhCommittee = e.target.getExtData().object.name;
            this.gridName = "";
            this.committee = this.areaArray.filter(m => {
                return m.value == this.ZhCommittee
            })[0].key
            this.areaArray.forEach(item => {
                if (item.key === this.committee) {
                    this.committeeValue = item.value;
                }
            })
            this.changeArea();
        } else if (this.committee && !this.gridName) {
            //点击网格
            this.queryMapData(3, id);
            this.gridName = e.target.getExtData().object.name;
            this.wgId = e.target.getExtData().object.id;
            this.analysisId = e.target.getExtData().object.id;
            if (this.isOpen) {
                this.wgId = id;
            }
            this.getWgyByWgId();
        } else if (this.gridName && this.wgId) {
            //点击网格员
            this.queryMapData(4, id);
            this.gridyName = e.target.getExtData().object.name;
            this.wgyId = e.target.getExtData().object.id;
            //隐藏其他网格员
            AMap.event.removeListener(this.zoomchangeListener);
            this.map.remove(this.textArr);
            this.map.remove(this.polygonArr);
            this.addPolygonArr([e.target.Ce.extData.object]);
        }
        this.getAllEvent();
    },
    //点击区域后去除之前添加的标记文字
    mapZoom(data, type) {
        this.map.remove(this.textArr); //去除之前添加的标记文字
        for (let i = 0; i < data.length; i++) {
            this.getCenterPoint(data[i].loca1, data[i].loca2, data[i].loca3, type);
        }
    },

    //通过经纬度计算中心点添加区域标题
    getCenterPoint(points, name, color, type) {
        //type 1 缩放等级超过16    否为小于16    超过16显示名字   否则不显示
        let text = [];
        let center = null;
        if (points) {
            center = points.split(",")
        } else {
            return
        }

        //设置文本内容
        let textClick = new AMap.Text({
            text: name,
            anchor: "center", // 设置文本标记锚点
            style: {
                border: "none",
                "background-color": "transparent",
                "text-align": "center",
                "font-size": "18px",
                color: color || 'red',
                "pointer-events": "none",
            },
            position: center,
            clickable: true,
        })

        //文本添加事件
        textClick.on('click', (event) => {
            this.gridData = [];
            let wgList = this.module8Data.list.filter(f => {
                return f.name == name
            })
            this.committeeValue = name;
            if (this.type == 1) {
                wgList[0].wgList.forEach(f => {
                    f.wgyList.forEach(m => {
                        this.gridData.push(m)
                    })
                })
            } else if (this.type == 2) {
                this.gridData = this.module8Data.list.filter(f => {
                    return f.name == name
                })[0].wgzList[0].wgyList;
            } else if (this.type == 3 || this.type == 4) {
                this.gridData = [this.module8Data.list.find(f => {
                    return f.name == name
                })]
            }
            this.dialogVisible = true;
        })
        text.push(textClick);
        if (type == 1) {
            for (let i = 0; i < text.length; i++) {
                text[i].setMap(this.map);
                this.textArr.push(text[i]);
            }
        } else {
            this.map.remove(this.textArr);
        }
    },