高德地图自定义信息窗体添加marker 点击列表切换marker

2022-01-25 16:59:10 阅读：286 来源： 互联网

标签：map 自定义 item 窗体 AMap marker let data

绘制地图

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();
        }

标签：map,自定义,item,窗体,AMap,marker,let,data
来源： https://blog.csdn.net/weixin_47996469/article/details/122688492

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9