百度地图API建站应用实例:沈阳地铁二号线站点地图

map

电子地图在日常建站中的应用已越来越广泛,无论是做团购网站、房地产网站或者连锁经营门店等网站,电子地图在网站中的作用都是不可小视的,一方面通过电子地图可以显示网站业主所能提供的产品或服务的地理分布,顾客利用电子地图也能知道路线或交通方式以便就近或付出最小精力获得这些产品或服务。

目前,能提供开放地图API资源服务的提供商主要有Google、百度、MapABC、图吧、灵图等,从API接口函数的丰富性以及功能性角度来说,还是首选谷歌地图API,但鉴于Google目前还未取得在国内互联网地图的牌照,稳定性方面还存在一定变数,所以我在本文选择利用百度地图API做一个实际应用的案例,与大家共同探讨应用体会。

沈阳地铁二号线于今年年初正式投入运营了,地铁为沈阳的市民出行带来了极大的便利,地铁二号线纵贯沈阳南北,目前包括:三台子、新乐遗址、北陵公园、沈阳北站、青年大街、奥体中心、全运路等19座车站。我们利用百度地图API可以很容易实现在电子地图中对这19座车站进行坐标的标注,同时为每个车站添加信息窗口,当用户点击站点图标时自动弹出车站的介绍,相关的图片和公交线路等信息。OK,下面就开始动手实践吧!

百度地图API是一套JavaScript编写的程序接口,所以我们只需新建一个HTML就可以引入API函数。
在网页<head>和</head>之间引入百度地图API,代码如下:
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.1&services=true“></script>

根据实际需求,在网页中利用DIV定义地图显示区域的大小和位置,代码如下:
<div style=”width:700px;height:600px;border:1px solid gray” id=”container”></div>

做沈阳地铁二号线地图我们需要用到百度地图API中的一些类,具体如下:

Map 核心类,用来实例化一个地图,通过addOverlay()方法将图标添加到地图上
Point 基础类,表示一个地理点坐标
Marker 覆盖物类,表示地图上一个图像标注
Control 所有控件的基类,通过Map.addControl()方法可以地图上添加控制键
InfoWindow 覆盖物类,表示地图上的信息窗口,通过addEventListener方法,添加例如点击鼠标的监听事件;openInfoWindow打开信息窗口方法

通过百度地图API提供的这些类和方法,我们就可以创建预想中的电子地图了,首先是利用百度地图API提供的拾取坐标系统,在百度地图上找到这19座站点分别对应的坐标,例如:三台子站(123.423449,41.874209),青年大街站(123.439582,41.797971)等,使用BMap.Marker将这些坐标在地图上做标记,利用addOverlay()方法将他们以图标的形式添加到电子地图上,然后为每个图标定制信息窗口,百度API支持HTML格式的复杂信息窗口,所以你可以在信息窗口中放置图片,链接甚至是文本框等。利用addEventListener方法为每个地铁站点标注的图标添加click事件,用户点击站点图标,当前站点对应的信息窗口将被打开。地图加载时,如果希望地图中我们标注过的地铁站点能够居中显示,还需要使用getCenter()方法,同时加载地图时,也可以让让某个站点的信息窗口默认是打开状态,完整的演示效果,请点击这里

以上就是一个利用百度地图API模拟构建的沈阳地铁二号线的站点地图,我们也仅仅是利用了百度地图API的一些很常见的类,如果构建更为复杂的商业应用,当然还要继续学习和实践,充分利用地图API能够提供的更多类和方法。随着电子地图在网站建设中的应用越来越深入和广泛,无论对于Web前段还是后端的开发人员,都应该对这个领域保持足够的关注!

利用Google地图API建站之基础篇——地理位置标记与信息提示

评论已关闭。