<摘要>你将在第三章中学会以下知识:
-----------------------------------------------------------------------------------------------------------------
一、如何添加标注、标签和信息窗口?
首先,我们需要创建一个点坐标,利用该点坐标来创建一个标注(Maker),最后将该标注显示在地图上。
比如我们了解到国家博物馆的坐标是116.407804,39.912123(如何获取这个坐标,请查看下文中的坐标拾取工具)。
所以创建这个点,再创建一个标注在这个点上。最关键的一步就是将它显示出来,显示覆盖物用addOverlay。
接下来,我们需要在这个标注的基础上,添加一个信息窗口。
为了在标注上添加一个信息窗口,我们需要对该标注建立一个监听事件,当鼠标点击标注后,方能显示信息窗口。
添加事件请使用addEventListener.
同理,你可以自己添加文字标签label。
其中point是文字标签显示的位置,offset可以设置它的偏移量。{}里的东西默认是可以不写的。
二、如何添加银行的标注?
但是,大家会不会觉得默认的这个红色标注很丑呢?那么我们一起来换一个标注吧!下面开始讲解,如何自定义标注。
为了看清楚,我把标注放得比较大。你自己可以换张小图片试试。
首先,我们要准备的是一张标注的图片。注意,一定需要一张背景透明的图片。然后定义三家银行的标注样式。有4个地方需要我们来设置。
第二是这个标注的大小BMap.Size,需要根据你银行图标的大小来定。
第三个是标注的偏移量offset。为什么要有偏移量呢?因为我们希望图标下面那个小尖尖刚好指在我们需要的坐标点上。
第四个就是相当于CSSsprites的设置了。由于我们的银行图标都放在了同一张图上,所以需要靠imageOffset这个设置来调整显示位置。
具体代码如下:
--------------------------------------------------------------------------------------------------------------------
小贴士:什么是覆盖物?
答:覆盖物包括了标注Marker、文字标签Label、信息窗口InfoWindow、圆形Circle、多边形Polygon,以及折线Polyline。
添加任何一个覆盖物都需要map.addOverlay();这个函数。
三、找坐标的使用工具——坐标拾取系统
2、在搜索框中输入你想查询位置的中文名称,例如“安定门”
3、找到合适的位置,点击鼠标右键开启添加标注功能。(小窍门:地图级别越高,位置越精确,建议把地图级别开到17或者18级哦~)
4、开启功能后,你就可以左键点击地图了。无论你点在哪里,网页的右边都会出现一组坐标信息,这就是当前小红点的坐标了。
5、如果你想改变小红点的位置,可以直接点击地图上另外的点,也可以拖动小红点。
注意:如果你要拖动地图,请先点击鼠标右键,关闭添加标注的功能。
-----------------------------------------------------------------------------------------------------------------------
学到这里,大家已经可以动手自己做一张自定义的银行分布图了。
主要步骤:
2、把银行名称、地址、坐标等内容存入数据库。
3、创建一个搜索条,查询用户输入的关键字。比如,用户输入“大望路招商银行”。
4、查询数据库,找到数据2符合条件。于是在(106.40,30.91)这个点上,添加一个招商银行的标注。
注意:这里显示的标注是自定义标注,就是说,如果查询的是招商银行,就显示招商银行的标注;查询的是建设银行,就显示建设银行的标注。
5、最后,利用panto或者setCenter把地图的中心移到银行标注的坐标点。
至于怎样建立数据库,我这里就不多说了,因为不太涉及到GIS或者API的东西。
有兴趣的同学可以去学习一下数据库,还有PHP或者.NET等后台程序。
------------------------------------------------------------------------------------------------------------------------
如果我们没有自己的数据库,也想建立一个银行网点的分布图,应该如何做呢?
在下一章,我们将学会,如何利用百度地图的数据库来建立全国银行网点的查询地图。