温航南

摘要：上海市旅游交通图的设计与制作主要调用百度地图API的接口，利用JavaScript技术和HTML语言来进行实现。本系统在上海市电子底图的基础上着重展示上海市的旅游景点信息和交通道路信息，实现了景点信息显示、路线规划、工具服务、个性化地图服务、天气预报等多种功能。上海市旅游交通图多方面、多角度地展示了上海市的旅游和交通信息，极大地方便了用户的出行。

关键词：百度地图;地图API;JavaScript技术;HTML语言;上海市;旅游交通图

中图分类号：TB文献标识码：Adoi：10.19311/j.cnki.16723198.2019.04.087

1引言

很多人在闲暇的时候本打算出去游玩，但由于对旅游景点、交通路况等信息不熟悉而找不到合适的地方去出游，最终选择了宅在家里消磨时光。随着信息时代的到来，互联网电子地图和旅游交通相结合可以有效地帮助用户解决这个问题。针对传统 GIS 开发周期长、过程复杂、建设成本高的缺陷，我们调用百度地图API的接口创建旅游地图信息系统，这样可以更便利、更准确地以WebGIS形式发布旅游资源信息，同时大大缩短了系统开发时间，提高了开发效率。

上海，中华人民共和国直辖市，是一座极具现代化而又不失传统特色的海派文化都市，旅游资源极为丰富，交通也非常发达。

电子地图，即数字地图，是利用计算机技术，以数字方式存储和查阅的地图。制作城市旅游交通电子地图具体以下优势：（1）可以将旅游景点信息、交通流量信息快速地显示在城市电子地图上面，缩短了用户获取旅游景点信息、交通流量信息的时间;（2）提供路径规划、周边搜索、天气预报等功能，有利于用户了解出行路线、生活服务等信息;（3）方便地图的更新和修改;（4）简单易懂，适合各种人群的使用。

制作上海市旅游交通图， 旨在多方面、多角度地展示上海市的旅游和交通信息，为用户进行旅游观光、交通出行提供相关的信息参考。

2上海市旅游交通图的设计

2.1设计流程

上海市旅游交通图的设计流程主要分为以下五个环节：（1）了解用户需求;（2）总体功能设计;（3）编码实现;（4）地图配置和程序设计与调试;（5）维护。

2.2设计要求

上海市旅游交通图主要有以下设计要求：（1）基本地图功能：拖拽、平移、展示、缩放等;（2）由于上海市旅游交通图主要用于旅游和交通方面，要求地图有较多的旅游景点信息和道路交通信息，例如旅游景点名称，著名景点的介绍及位置信息，道路名称等;（3）能够提供智能搜索服务，并且用户在输入框输入信息时有关键字提示，方便用户精确检索要去的地方;（4）提供周边检索服务，能够搜索周边的美食，酒店，银行，景点，药店公交站，地铁站，加油站，停车场，洗浴中心等;（5）提供测距功能，用户可以在地图上查看两点之间的实际直线距离;（6）提供定位功能，方便用户知道自己所在的位置;（7）提供路线规划服务，包括步行，驾车，公交等多种方式;（8）支持在地图上添加右键菜单，通过鼠标右键可以实现放大、缩小、放置到最大级、查看全国、添加标注等功能;（9）个性化数据展示功能：用户可以选择不同的底色进行个性化地图的显示;（10）逆/地理编码：支持百度地图经纬度坐标与地址信息之间的转换服务;（11）图層功能：用户可以自定义添加图层，例如交通图层和旅游景点图层。

3上海市旅游交通图的制作过程

3.1创建上海市地图

（1）首先通过申请秘钥来调用百度地图的接口，接着创建地图容器元素，在这创建div元素来作为百度地图的容器。

（2）创建点坐标：var point = new BMap.Point（121.487899486，31.24916171）。该坐标点大致指的是上海市中心的位置;其中121.487899486表示经度，31.24916171表示纬度。

（3）地图初始化：在创建完点坐标后，对该地图进行初始化，并设置地图的显示级别。

（4）地图配置与操作：在该地图初始化以后，上海市的地图就显示出来了。上海市旅游交通图的外观和行为与百度地图十分相似，同样支持鼠标拖拽、双击放大、滚轮缩放等功能。

（5）地图控件简述：上海市旅游交通图中添加有平移缩放控件，位于地图左上方;缩略图控件，位于地图右下方;比例尺控件，位于地图左下方。

3.2地图主要功能实现

3.2.1添加覆盖物

覆盖物是指所有叠加或覆盖到地图的内容，标注就是覆盖物的一种。该系统有添加标注和移除标注的功能：当用户添加标注时，系统会自动捕获该标注的坐标并转换为相应的地理位置信息;当用户移除标注时，标注就会被自动移除。

3.2.2添加右键菜单功能

在该系统中，通过点击鼠标右键可以实现放大、缩小、放置到最大级、查看全国、在此添加标注等功能。

3.2.3添加测距功能

在该系统中，用户可以通过测距工具测量地图上两点之间的实际直线距离。

3.2.4添加智能搜索

在该系统中，当用户在输入框输入信息时，系统将搜索的结果展示在地图上，并将搜索结果的详细信息展示在系统界面右边的面板上。

3.2.5添加路线规划

当用户输入出发地和目的地时，该系统提供公交、驾车、步行等方式进行路线规划，极大地方便了用户出行。

3.2.6添加周边检索

该系统中为用户提供周边服务的功能，用户可以选择系统界面右侧面板上的银行、超市、药店、ATM、景点、KTV、餐厅、公交站、地铁站、加油站、停车场等进行周边检索。以下为检索周边超市的示例，如图1所示。

3.2.7添加反向地理编码

地理编码能够将地址信息转换为地理坐标点信息。反向地理编码的过程与它相反，它根据一个坐标点的经纬度得到一个地址的描述。例如添加标注中就会自动拾取该标注的经纬度坐标并转化为相应的地址信息。

3.2.8添加全景地图

上海市旅游交通图提供部分街道的全景地图，用户可以通过点击全景控件观看街景，给用户带来身临其境的体验效果。以下为人民大道全景图的示例，如图2所示。

3.2.10添加天气

该系统提供上海市天气预报功能，为用户的出行提供天气的参考，极大地方便用户出行。以下为上海市天气预报图，如图3所示。

3.3地图核心功能实现

地图可以包含一个或多个图层，在上海市旅游交通图的设计与制作中添加有交通流量图层和景点分类图层。

3.3.1添加交通流量图层

以下为系统添加交通流量图层的效果图，如图4所示。

3.3.2添加景点分类

上海市的旅游景点信息有很多，而该系统对一些著名的旅游景点信息进行展示。为了提高用户体验，上海市的旅游景点信息被分为人文景点和自然景点两类，用户可以根据自己的需求有选择性地进行查看，当用户点击标注时会有该景点的详细信息。以下为上海市著名自然景点的分布图，如图5所示。

4结束语

上海市旅游交通图调用百度地图API的接口提供地图服务，同时利用JavaScript技术和HTML语言来进行前端开发。该系统主要在上海市底图的基础上着重展示上海市的旅游景点和交通道路信息，具有界面友好、可操作性强的特点，极大地方便了用户的出行。但是，该系统还存在着一些不足，需要进一步完善。例如，该系统不能打印输出地图、旅游景点信息不够完善、兼容性不够好等问题。

参考文献

[1]白学文，杨红，杨韬.基于百度地图 API 发布乡镇精细化天气预报[J].云南科技管理，2012，（01）：46148.

[2]任金铜，付利平，王志红.基于百度地图API的毕节市旅游信息系统设计与开发[J].测绘标准化，2015，31（02）：2728.

[3]李艷.基于地图API的Web地图服务及应用研究[J].地理信息世界，2010，04（2）：5457.

[4]王红崧，周海晏.基于百度地图API的旅游地理信息系统开发[J].现代计算机（专业版），2012，（23）：6063.

[5]David Flanagan.JavaScript权威指南[M].北京：机械工业出版社，2012：57.