绘制地图

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><divstyle="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);}// 获取信息窗体的htmllet 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();}