《基于高德地图的生活服务平台的设计与实现》由会员分享，可在线阅读，更多相关《基于高德地图的生活服务平台的设计与实现（5页珍藏版）》请在金锄头文库上搜索。
1、基于高德地图的生活服务平台的设计与实现 马超 李苗 哈尔滨师范大学地理科学学院 摘 要： 本文在 dcloud 平台下利用 MUI 框架搭建平台, 使用 JavaScript、HTML5+、CSS语言编写基于高德地图开放平台的生活服务应用程序, 再利用 JavaScript 语言编写的应用程序接口来连接高德地图 JavaScript API。高德地图 API 已经为开发者开放了很多接口, 目前有定位、地图展现、搜素、地址匹配、周边查询、规划出行路线等接口, 利用高德开放平台, 设计一款基于高德地图的生活服务平台, 实现对周边医院、超市、派出所等查询导航功能, 以及数字地图的基本功能。关键词：
2、电子地图; MUI 框架; JavaScript; HTML5+; CSS3; 作者简介：马超 (1995) , 男, 内蒙古人, 本科, 研究方向为地理信息系统。基金：哈尔滨师范大学大学生实践创新基金项目Design and Implementation of a Life Service Platform Based on Gaode MapMa Chao Li Miao Abstract： This paper builds the platform through the MUI framework in the dcloud platform, using JavaScript, H
3、TML5+ and CSS language to write the life service program based on the open platform of Gaode Map, and then using JavaScript language programming interface to connect the JavaScript API of Gaode Map.Gaode Map API has opened many interfaces such as positioning, map display, searching, address matching
4、, surrounding searching and travel route planning. By using the open platform of Gaode Map, we aim to design a life service platform based on Gaode Map, in order to realize the functions of searching and navigating surrounding hospitals, supermarkets and police stations, as well as other basic funct
5、ions of a digital map.Keyword： digital map; MUI framework; JavaScript; HTML5+; CSS3; 随着社会发展、科学技术的进步以及观念的转变, 地图在人们生活中的作用越来越大, 因此产生了对电子地图的大量需求。电子地图 (Electronic map) 又叫数字地图, 它的功能非常强大, 而且它是利用先进的计算机科学技术, 以数字方式存储和查阅的地图1-2。就目前来看国内外有高德、百度、腾讯、搜狗、谷歌等等, 而从全球历史角度看, 西欧、北美、日本这三个地区地图发展比较早, 尤其是导航电子地图行业, 历经十几年发展, 其市
6、场也在正逐步成熟。我国导航电子地图目前还是以点、线、面组成二维导航画面, 但是随着技术的更新, 社会的需求, 三维导航地图也随之而来。目前高德地图开放平台为开发者提供了 2D、3D 卫星多种地图形式供选择, 不管是基于哪种平台的开发设计, 最终都可以利用高德开放平台提供的 API 和 SDK 技术完成地图的构建工作。考虑到开发者的需要, 高德开放平台还为开发者提供了地图再开发能力, 而且非常强大, 不仅提供全面的数据支持, 而且还支持离线在线两种使用方式, 提供多种地图交互模式, 可以满足各个场景下对地图的需求。开放平台的开启, 意味着越来越多的应用使用数字地图, 这也就更加方便人们的生活。本
7、文将设计一款基于高德地图的生活服务平台, 实现对周边医院、超市、派出所等查询导航功能, 以及数字地图的基本功能。1 系统总体设计1.1 设计内容该系统是基于高德开放平台, 以 MUI 框为 UI 框架, 利用 HTML5+、CSS、Java Script 语言实现, 主要包括首页、附近派出所、常见问题、个人中心四个模块组成, 其中首页模块显示我的位置、我要报警、如何正确报警等功能, 附近派出所模块显示我的位置、我的位置附近 5000 米的派出所, 常见问题模块主有生活中一些常见问题的查询功能, 我的位置模块有版本更新、登陆、个人信息等模块。1.2 设计过程基于高德地图的生活服务平台主要设计过程
8、有:开发环境的搭建, 语言的编写以及接口连接的实现。(1) 开发环境的搭建, 本平台是在 dcloud 平台下利用 MUI 框架搭建, MUI 是一个面向对象的图形用户界面来创建和维护系统3。(2) 语言的编写, 使用 Java Script、HTML5+、CSS 语言编写基于高德地图的生活服务平台应用程序, 实现对周边医院、超市、派出所的查询功能, 以及地图的基本定位导航功能。(3) 接口的实现, 高德地图 API 是为开发者免费提供了一套基于高德地图服务的应用接口, 包括 Web 端、Android 平台、i OS 平台、Web 服务、Java Script API、SDK、定位 SDK
9、等多种开发工具与服务。提供了基本的地图定位、导航、搜索、路线规划、室内地图等功能。基于高德地图的生活服务平台就是利用Java Script 语言编写的应用程序接口, 连接高德地图 Java Script API4-6。2 基于高德地图的生活服务平台的设计与实现为了更加方便地服务开发者, 目前基于高德地图 Java Script API 为开发者提供很多工具, 尤其 API 的 UI 组件库, 侧重于帮助开发者快速实现地图功能, 并且能够使 UI 组件得到个性化展示。图 1 系统首页 下载原图图 2 我要报警的提示界面 下载原图2.1 首页打开 APP 首先会自动读取你的位置信息 (定位) ,
10、屏幕上显示你的具体位置, 你也可以选择点击定位按钮 (灰色圆圈) , 然后可以选择操作, 点击我要报警就会弹出提示, 可以选择性操作, 点击继续填写报警内容, 也可直接报警。首页还有一个提示:如何正确拨打 110 报警?打开会有详细叙述。另外就是可以选择拖动地图, 有选择性地进行地图浏览。2.2 附近派出所点击附近派出所, 就会在地图上显示你附近的派出所以及具体位置和联系方式, 你可进行拖动地图、放大缩小等操作, 有选择性地进行查看。地图上也有标记, 附近派出所的个数一目了然。另外还有查询功能。图 3 报警界面 下载原图图 4 附近派出所 下载原图2.3 常见问题点击常见问题, 你会看到三个问
11、题, 目前只是简单地列出了三个问题, 后期会逐渐增多。点击不同的问题, 你会看到不同的解决办法, 另外也有查询功能, 可以进行关键字查询。图 5 常见问题 下载原图图 6 正确报警提示 下载原图2.4 个人中心点击个人中心, 目前有账号、身份证、常住地址、紧急联系人电话、报警电话、检查更新及登录功能。你可以进行选择性地填写。图 7 个人中心 下载原图3 结语本文在 dcloud 平台下利用 MUI 框架搭建平台, 使用 Java Script、HTML5+、CSS 语言编写基于高德地图开放平台的生活服务应用程序, 利用 Java Script 语言编写的应用程序接口, 连接高德地图 Java
12、Script API, 设计了一款基于高德地图的生活服务平台, 实现了对周边医院、超市、派出所等查询导航功能, 以及数字地图的基本功能。参考文献1雷国平, 门里, 戴闽鲁, 等.Map Info 在 CMMB 路测分析中的应用研究J.电视技术, 2012, 36 (11) :7-10. 2Douglas Crockford.Java Script 语言精粹M.北京:电子工业出版社, 2012. 3Charles Wyke-Smith.CSS 设计指南 (第 3 版) (图灵程序设计丛书) M.北京:人民邮电出版社, 2013. 4王磊, 白毅平, 胡金磊.基于 Baidu 地图 API 的海洋预报显示系统J.中国市场, 2016 (48) :64-65. 5陆凌牛.HTML 5 与 CSS 3 权威指南M.北京:机械工业出版社, 2011. 6卡斯特罗.HTML5 与 CSS3 基础教程M.北京:人民邮电出版社, 2014.
