地图模块实现流程操作指南地图页面一、模块概述地图模块PageShopList实现门店浏览和选择功能为用户提供一个直观的门店列表支持地图展示区域折叠、门店卡片展示、门店选择和确认等操作。该模块在点餐流程中起到选择取餐/配送门店的关键作用。二、模块职责职责说明地图展示可折叠的地图区域显示门店标记门店列表展示所有门店的详细信息卡片门店选择点击卡片高亮选中支持切换状态展示门店营业状态标识营业中/休息中确认跳转底部确认按钮保存选择并返回三、数据模型门店数据模型ShopModel.etsexportclassShopDetail{id:stringname:stringaddr:stringlatitude:number0// WGS84坐标longitude:number0time:string// 营业时间status:string// 营业状态phone:string// 联系电话}本项目预置了5家甜蜜时光门店数据南京地区新街口旗舰店营业中河西万达店营业中仙林大学城店营业中江宁百家湖店休息中大行宫文创店营业中四、实现流程步骤1创建页面结构Componentexportstruct PageShopList{LocalStorageLink(chooseShop)chooseShop:stringStateshopList:ShopDetail[]shopListDataStatepreChooseShop:string// 预选门店确认前StateisMapExpanded:booleantrue// 地图展开状态aboutToAppear():void{this.preChooseShopthis.chooseShop// 恢复上次选择}build(){NavDestination(){Column(){// 地图区域// 折叠/展开切换// 门店列表// 底部确认按钮}}.title(选择门店)}}步骤2实现可折叠地图区域Stack(){Column(){Text(️).fontSize(60)Text(门店分布地图).fontSize(14)Row(){ForEach(this.shopList,(shop:ShopDetail){Text().fontSize(20).onClick((){this.preChooseShopshop.name})})}}.backgroundColor(#E8F4E8).borderRadius(16)}.height(this.isMapExpanded?220:0).animation({duration:300,curve:Curve.EaseInOut})设计要点使用animation属性实现折叠/展开的平滑过渡动画地图区域使用模拟展示实际项目可集成 MapKit步骤3实现门店卡片列表使用ShopCard公共组件渲染每个门店ForEach(this.shopList,(shop:ShopDetail){ShopCard({shop:shop,isSelected:this.preChooseShopshop.name,onSelect:(s:ShopDetail){this.preChooseShops.name},onCall:(s:ShopDetail){// 调用电话实际项目可使用 call.makeCall}})})步骤4ShopCard组件实现Componentexportstruct ShopCard{shop:ShopDetailnewShopDetail(,,,0,0,,)isSelected:booleanfalsebuild(){Column(){Row(){Text().fontSize(28)Column(){Text(this.shop.name)Text(this.shop.addr)}if(this.isSelected){Text(✓).fontColor(#FF6B35)// 选中标记}}Row(){Text(${this.shop.time})Text(this.shop.status).fontColor(this.shop.status营业中?#4CAF50:#FF4444)}}}}状态颜色方案营业中绿色文字#4CAF50 浅绿背景#E8F5E9休息中红色文字#FF4444 浅红背景#FFEBEE步骤5确认选择并返回Button(确认选择去下单).backgroundColor(#FF6B35).onClick((){if(this.preChooseShop.length0){this.chooseShopthis.preChooseShop// 更新LocalStorageRouterModule.pop(NavStackMap.MAIN_STACK)// 返回上一页}})数据流向用户选择门店 → preChooseShop (临时状态) → 点击确认 → chooseShop (LocalStorageLink) → RouterModule.pop → 美食页面自动更新门店显示五、坐标转换工具MapUtil在实际地图集成中需要将WGS84坐标转换为GCJ02坐标国内地图坐标系exportclassMapUtil{staticwgs84ToGcj02(lat:number,lng:number):number[]{// WGS84 → GCJ02 坐标转换算法// 返回 [转换后纬度, 转换后经度]}}使用场景门店坐标存储在WGS84格式显示在高德/华为地图时需要转换为GCJ02。六、注意事项preChooseShop使用State管理仅在确认后才写入LocalStorageLink地图折叠动画使用animation({ duration: 300, curve: Curve.EaseInOut })门店电话号码可选填为空时隐藏拨号按钮实际项目中可集成kit.MapKit实现真实地图展示和路径规划从美食页面进入门店选择后返回时美食页面自动读取更新后的chooseShop值
蛋糕美食元服务_地图实现指南
地图模块实现流程操作指南地图页面一、模块概述地图模块PageShopList实现门店浏览和选择功能为用户提供一个直观的门店列表支持地图展示区域折叠、门店卡片展示、门店选择和确认等操作。该模块在点餐流程中起到选择取餐/配送门店的关键作用。二、模块职责职责说明地图展示可折叠的地图区域显示门店标记门店列表展示所有门店的详细信息卡片门店选择点击卡片高亮选中支持切换状态展示门店营业状态标识营业中/休息中确认跳转底部确认按钮保存选择并返回三、数据模型门店数据模型ShopModel.etsexportclassShopDetail{id:stringname:stringaddr:stringlatitude:number0// WGS84坐标longitude:number0time:string// 营业时间status:string// 营业状态phone:string// 联系电话}本项目预置了5家甜蜜时光门店数据南京地区新街口旗舰店营业中河西万达店营业中仙林大学城店营业中江宁百家湖店休息中大行宫文创店营业中四、实现流程步骤1创建页面结构Componentexportstruct PageShopList{LocalStorageLink(chooseShop)chooseShop:stringStateshopList:ShopDetail[]shopListDataStatepreChooseShop:string// 预选门店确认前StateisMapExpanded:booleantrue// 地图展开状态aboutToAppear():void{this.preChooseShopthis.chooseShop// 恢复上次选择}build(){NavDestination(){Column(){// 地图区域// 折叠/展开切换// 门店列表// 底部确认按钮}}.title(选择门店)}}步骤2实现可折叠地图区域Stack(){Column(){Text(️).fontSize(60)Text(门店分布地图).fontSize(14)Row(){ForEach(this.shopList,(shop:ShopDetail){Text().fontSize(20).onClick((){this.preChooseShopshop.name})})}}.backgroundColor(#E8F4E8).borderRadius(16)}.height(this.isMapExpanded?220:0).animation({duration:300,curve:Curve.EaseInOut})设计要点使用animation属性实现折叠/展开的平滑过渡动画地图区域使用模拟展示实际项目可集成 MapKit步骤3实现门店卡片列表使用ShopCard公共组件渲染每个门店ForEach(this.shopList,(shop:ShopDetail){ShopCard({shop:shop,isSelected:this.preChooseShopshop.name,onSelect:(s:ShopDetail){this.preChooseShops.name},onCall:(s:ShopDetail){// 调用电话实际项目可使用 call.makeCall}})})步骤4ShopCard组件实现Componentexportstruct ShopCard{shop:ShopDetailnewShopDetail(,,,0,0,,)isSelected:booleanfalsebuild(){Column(){Row(){Text().fontSize(28)Column(){Text(this.shop.name)Text(this.shop.addr)}if(this.isSelected){Text(✓).fontColor(#FF6B35)// 选中标记}}Row(){Text(${this.shop.time})Text(this.shop.status).fontColor(this.shop.status营业中?#4CAF50:#FF4444)}}}}状态颜色方案营业中绿色文字#4CAF50 浅绿背景#E8F5E9休息中红色文字#FF4444 浅红背景#FFEBEE步骤5确认选择并返回Button(确认选择去下单).backgroundColor(#FF6B35).onClick((){if(this.preChooseShop.length0){this.chooseShopthis.preChooseShop// 更新LocalStorageRouterModule.pop(NavStackMap.MAIN_STACK)// 返回上一页}})数据流向用户选择门店 → preChooseShop (临时状态) → 点击确认 → chooseShop (LocalStorageLink) → RouterModule.pop → 美食页面自动更新门店显示五、坐标转换工具MapUtil在实际地图集成中需要将WGS84坐标转换为GCJ02坐标国内地图坐标系exportclassMapUtil{staticwgs84ToGcj02(lat:number,lng:number):number[]{// WGS84 → GCJ02 坐标转换算法// 返回 [转换后纬度, 转换后经度]}}使用场景门店坐标存储在WGS84格式显示在高德/华为地图时需要转换为GCJ02。六、注意事项preChooseShop使用State管理仅在确认后才写入LocalStorageLink地图折叠动画使用animation({ duration: 300, curve: Curve.EaseInOut })门店电话号码可选填为空时隐藏拨号按钮实际项目中可集成kit.MapKit实现真实地图展示和路径规划从美食页面进入门店选择后返回时美食页面自动读取更新后的chooseShop值
