随着我国城市建设的大力推进,城市规模不断扩大,大型商圈涌现,交通线路越发复杂。人们出行大多依靠手机地图应用进行导航,准确的室内地图可以帮助用户到达最终目的地,但是手机地图应用与室内商圈信息同步不及时,容易造成错误导航。目前室内地图绘制系统采用栅格数据绘制地图,图形在高分辨率的移动设备中显示时有锯齿感,降低了用户体验。通过分析现有手机地图应用在商圈地图方面的功能不足以及室内地图绘制系统图形呈现不清晰的情况,设计实现了基于HTML5的室内地图绘制呈现系统,为商场提供自定义绘制其商户位置地图的能力。根据用户对系统的需求,系统划分为三个子系统:室内地图绘制子系统、室内地图呈现子系统以及商场信息存储和导航子系统。室内地图绘制子系统提供了完善的绘制工具,通过监听用户的操作,利用高清晰度且内存小的SVG(Scalable Vector Graphics,可缩放矢量图)绘制图形。室内地图呈现子系统向用户展示地图,并对商场的一些活动进行推广。商场信息存储和导航子系统用于持久化存储商场信息以及提供地图导航功能。改进扫面线算法,将存储的地图矢量数据转化为栅格数据。根据栅格数据和用户的起始点与目的地,通过A*算法来实现路径导航。最后,本文阐述了系统测试方法,分析结果表明室内地图绘制呈现系统可以满足商圈地图绘制与导航需求。