绘制地图

initMap() {
            this.map.mapObject = new AMap.Map("mapContainer", {
                center: [this.lng, this.lat],
                zoom: this.zoom,
                resizeEnable: true,
                rotateEnable: true,
                pitchEnable: true,
                pitch: 0,
                rotation: 0,
                viewMode: "3D", //开启3D视图,默认为关闭
                buildingAnimation: true, //楼块出现是否带动画
                expandZoomRange: true,
                mapStyle: 'amap://styles/b614b20c337fa36700286089982f8561'
            });
            // 点标记
            this.markPoints();
            this.map.mapObject.on('click', () => {
                this.closeIntegralDetailsPopup();
            });
        },

添加marker

// 点标记
        async markPoints() {
            let res = await getVolunteerActivityListByMap({ startDate: this.searchVal[0], endDate: this.searchVal[1] });
            if (res.code === 200) {
                this.map.mapData = res.details.data;
                this.map.mapData.forEach(item => {
                    if (item.coordinate) {
                        let coordinateArray = item.coordinate.split(",");
                        let marker = new AMap.Marker({
                            position: new AMap.LngLat(coordinateArray[0], coordinateArray[1]),
                            offset: new AMap.Pixel(-46, -66),
                            zIndex: 999,
                            content: `<div style="display: flex;flex-direction: column;align-items: center;font-size: 12px;"> <div style="width: 72px;background: #fff;padding: 6px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;border-radius: 5px;text-align: center;color: #4188ff">${item.fullName}</div><div
                style="width: 40px;height: 40px;background: rgba(54,203,153,0.16);border-radius: 50%;display:flex;align-items: center;justify-content: center;"><div style="width: 21px;height: 21px;background: linear-gradient(135deg,#de6a16, #d8b32f );border: 1px solid #ffffff;border-radius: 50%;"></div></div></div>`,
                        });
                        this.map.markList.push(marker);
                        this.addMarkClickEvent(item, -64, marker);
                    }
                });
                this.map.mapObject.add(this.map.markList);
            }
        },

添加marker点击事件

 addMarkClickEvent(item, offset, marker) {
            AMap.event.addListener(marker, "click", () => {
                this.showInfoWindow(item, offset, false);
            });
        },

展示信息窗体

 async showInfoWindow(item, offset, moveToCenter) {
            if (!item.coordinate) {
                alert("此户暂无经纬度！");
            }
            let coordinateArray = item.coordinate.split(",");
            if (moveToCenter) {
                this.map.mapObject.setZoomAndCenter(this.map.mapObject.getZoom(), coordinateArray);
            }
            // 获取信息窗体的html
            let html = await this.createIntegralDetailsBox(item);
            let infoWindow = new AMap.InfoWindow({
                isCustom: true,
                content: html,
                offset: new AMap.Pixel(0, offset),
            });
            infoWindow.open(this.map.mapObject, coordinateArray);
        },

信息窗体详情

 async createIntegralDetailsBox(item) {
            this.integralType = 0;
            let html = "";
            this.integralHzId = item.id;
            let res = await getVolunteerActivityDetailsById({
                id: this.integralHzId,
            });
            if (res.code === 200) {
                let data = res.details.data;
                html = `<div class="integralDetailsBox">
                                <div class="info">
                                    <div class="name">${data.fullName}</div>
                                    <div class="closeBox"><img onclick="closeIntegralDetailsPopup()" src="${this.imgs.close}" alt="图片"></div>
                                </div>
                                <div class="integralBox">
                                    <div>活动时间: ${data.startTime}-${data.endTime}</div>
                                </div>
                                 <div class="integralBox">
                                    <div>活动地点: ${data.address}</div>
                                </div>
                                <div class="integralBox">
                                    <div>服务类型: ${data.serviceType}</div>
                                </div>
                                <div class="integralBox">
                                    <div>发起组织: ${data.teamFullName}</div>
                                </div>
                                <div class="integralBox">
                                    <div>报名人数: ${data.enrollCount || 0}</div>
                                </div>
                                <div class="integralBox">
                                    <div>活动时长: ${data.duration / 60}</div>
                                </div>
                            </div>`;
            }
            return html;
        },

关闭信息窗体

closeIntegralDetailsPopup() {
            this.map.mapObject.clearInfoWindow();
        }