【百度地图API】创建全国银行位置查询系统（三）——如何在地图上添加银行标注

原文: 【百度地图API】创建全国银行位置查询系统（三）——如何在地图上添加银行标注

<摘要>你将在第三章中学会如下知识：

1. 如何在地图上添加带银行logo的标注？（你也能够换成商场logo，酒店logo等）
2. 如何在标注上显示信息窗口，以及添加文字标签等其余覆盖物；
3. 最后，介绍一个获取坐标的给力工具。

-----------------------------------------------------------------------------------------------------------------

1、如何添加标注、标签和信息窗口？

首先，咱们须要建立一个点坐标，利用该点坐标来建立一个标注（Maker），最后将该标注显示在地图上。

好比咱们了解到国家博物馆的坐标是116.407804,39.912123（如何获取这个坐标，请查看下文中的坐标拾取工具）。

因此建立这个点，再建立一个标注在这个点上。最关键的一步就是将它显示出来，显示覆盖物用addOverlay。

var pointMarker = new BMap.Point( 116.407804 , 39.912123 ); // 建立标注的坐标
var marker = new BMap.Marker(pointMarker); // 建立标注
map.addOverlay(marker); // 将标注添加到地图中

 

接下来，咱们须要在这个标注的基础上，添加一个信息窗口。

为了在标注上添加一个信息窗口，咱们须要对该标注创建一个监听事件，当鼠标点击标注后，方能显示信息窗口。

添加事件请使用addEventListener.

 

var infoWindow = new BMap.InfoWindow( " 点击标注后信息窗口就显示了 " ); // 建立信息窗口对象
marker.addEventListener( " click " , function (){ // 给标注添加点击事件
this .openInfoWindow(infoWindow);
});

 

同理，你能够本身添加文字标签label。

其中point是文字标签显示的位置，offset能够设置它的偏移量。{}里的东西默认是能够不写的。

 

var label = new BMap.Label( " 请点击红色标注 " ,{point : pointMarker, 

　　　　　　　 offset: new BMap.Size( 3 , - 6 )}); // 定义一个文字标签
map.addOverlay(label);

点击这里，运行该代码。右键点击新打开的窗口，能够查看源代码哦。

 

2、如何添加银行的标注？

可是，你们会不会以为默认的这个红色标注很丑呢？那么咱们一块儿来换一个标注吧！下面开始讲解，如何自定义标注。

为了看清楚，我把标注放得比较大。你本身能够换张小图片试试。

首先，咱们要准备的是一张标注的图片。注意，必定须要一张背景透明的图片。而后定义三家银行的标注样式。有4个地方须要咱们来设置。

第一就是银行图标的地址，咱们能够把多张银行图标放在一张图上。好比这张图，点击这里下载。

第二是这个标注的大小BMap.Size，须要根据你银行图标的大小来定。

第三个是标注的偏移量offset。为何要有偏移量呢？由于咱们但愿图标下面那个小尖尖恰好指在咱们须要的坐标点上。

第四个就是至关于CSS sprites的设置了。因为咱们的银行图标都放在了同一张图上，因此须要靠imageOffset这个设置来调整显示位置。

具体代码以下：

 

// 建立招商银行的标注图标
var zsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset: new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , 0 ) // 这里至关于CSS sprites
});
// 建立中国银行的标注图标
var zgIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset: new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 64 ) // 这里至关于CSS sprites
});
// 建立建设银行的标注图标
var jsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset: new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 128 ) // 这里至关于CSS sprites
});

 

而后咱们分别添加3个银行标注在地图上。点击这里运行代码。源代码以下：

 

<! DOCTYPE html >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 酸奶小妹——百度地图API学习 </ title >
< style type ="text/css" >
html { height : 100% }
body { height : 100% ; margin : 0px ; padding : 0px }
#milkMap { height : 400px ; width : 600px ; border : 1px solid blue ; }
</ style >
< script type ="text/javascript" src ="http://api.map.baidu.com/api?v=1.1&services=false" ></ script >
</ head >
< body >
< div id ="milkMap" ></ div >
</ body >
< script type ="text/javascript" >
var map = new BMap.Map( " milkMap " ); // 建立地图实例
var point = new BMap.Point( 116.404 , 39.915 ); // 建立点坐标
map.centerAndZoom(point, 16 ); // 初始化地图，设置中心点坐标和地图级别
map.addControl( new BMap.OverviewMapControl({isOpen: 1 , anchor: BMAP_ANCHOR_TOP_RIGHT})); // 为地图添加鹰眼
map.addControl( new BMap.NavigationControl()); // 为地图添加鱼骨

var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size( 485 , 0 )}) // 设置版权信息偏移量
map.addControl(myCopyright); // 为地图添加版权控件
myCopyright.addCopyright({id : 1 , content : ' <a style="line-height:30px;height:30px;display:block;color:red;background:yellow" href="http://www.cnblogs.com/milkmap/"><img src="http://www.ui-love.com/static/img/uiico.ico" />酸奶小妹的博客园</a> ' });

// 建立招商银行的标注图标
var zsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset: new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , 0 ) // 这里至关于CSS sprites
});
// 建立中国银行的标注图标
var zgIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset: new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 64 ) // 这里至关于CSS sprites
});
// 建立建设银行的标注图标
var jsIcon = new BMap.Icon( " http://ui-love.com/baidumap/bank/marker.gif " , // 图片地址
new BMap.Size( 40 , 64 ), // 标注显示大小
{
offset: new BMap.Size( 20 , 64 ), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size( 0 , - 128 ) // 这里至关于CSS sprites
});

var pointMarker1 = new BMap.Point( 116.403704 , 39.912123 ); // 建立招商银行标注的坐标
var pointMarker2 = new BMap.Point( 116.407804 , 39.916123 ); // 建立中国银行标注的坐标
var pointMarker3 = new BMap.Point( 116.400804 , 39.915123 ); // 建立建设银行标注的坐标
var marker1 = new BMap.Marker(pointMarker1, {icon: zsIcon}); // 建立招商银行标注
var marker2 = new BMap.Marker(pointMarker2, {icon: zgIcon}); // 建立中国银行标注
var marker3 = new BMap.Marker(pointMarker3, {icon: jsIcon}); // 建立建设银行标注
map.addOverlay(marker1); // 将招商银行标注添加到地图中
map.addOverlay(marker2); // 将中国银行标注添加到地图中
map.addOverlay(marker3); // 将建设银行标注添加到地图中

var infoWindow1 = new BMap.InfoWindow( " 你点击了招商银行的标注 " ,{offset: new BMap.Size( 0 , - 64 )});
marker1.addEventListener( " click " , function (){ // 给招商银行标注添加点击事件
this .openInfoWindow(infoWindow1); // 打开招商银行的窗口
});
var infoWindow2 = new BMap.InfoWindow( " 你点击了中国银行的标注 " ,{offset: new BMap.Size( 0 , - 64 )});
marker2.addEventListener( " click " , function (){ // 给中国银行标注添加点击事件
this .openInfoWindow(infoWindow2); // 打开中国银行的窗口
});
var infoWindow3 = new BMap.InfoWindow( " 你点击了建设银行的标注 " ,{offset: new BMap.Size( 0 , - 64 )});
marker3.addEventListener( " click " , function (){ // 给建设银行标注添加点击事件
this .openInfoWindow(infoWindow3); // 打开建设银行的窗口
});
</ script >
</ html >

 

--------------------------------------------------------------------------------------------------------------------

小贴士：什么是覆盖物？

答：覆盖物包括了标注Marker、文字标签Label、信息窗口InfoWindow、圆形Circle、多边形Polygon，以及折线Polyline。

添加任何一个覆盖物都须要map.addOverlay();这个函数。

 

如何添加其余覆盖物呢？你能够到API的官方网站上查询类参考->覆盖物。

--------------------------------------------------------------------------------------------------------------------

 

3、找坐标的使用工具——坐标拾取系统

一、进入该工具网址：http://openapi.baidu.com/map/pick/index.html

二、在搜索框中输入你想查询位置的中文名称，例如“安定门”

三、找到合适的位置，点击鼠标右键开启添加标注功能。（小窍门：地图级别越高，位置越精确，建议把地图级别开到17或者18级哦~）

四、开启功能后，你就能够左键点击地图了。不管你点在哪里，网页的右边都会出现一组坐标信息，这就是当前小红点的坐标了。

五、若是你想改变小红点的位置，能够直接点击地图上另外的点，也能够拖动小红点。

注意：若是你要拖动地图，请先点击鼠标右键，关闭添加标注的功能。

 

-----------------------------------------------------------------------------------------------------------------------

学到这里，你们已经能够动手本身作一张自定义的银行分布图了。

主要步骤：

一、利用工具找到银行的地理位置，也就是坐标。

二、把银行名称、地址、坐标等内容存入数据库。

三、建立一个搜索条，查询用户输入的关键字。好比，用户输入“大望路 招商银行”。

四、查询数据库，找到数据2符合条件。因而在（106.40,30.91）这个点上，添加一个招商银行的标注。

注意：这里显示的标注是自定义标注，就是说，若是查询的是招商银行，就显示招商银行的标注；查询的是建设银行，就显示建设银行的标注。

五、最后，利用panto或者setCenter把地图的中心移到银行标注的坐标点。

 

// 如下两者选其一便可。建议选第二个，由于地图平移的动画。
setCenter(markerPoint); // 从新设置地图的中心点
panto(markerPoint); // 将地图中心点平移到坐标点

 

至于怎样创建数据库，我这里就很少说了，由于不太涉及到GIS或者API的东西。

有兴趣的同窗能够去学习一下数据库，还有PHP或者.NET等后台程序。

------------------------------------------------------------------------------------------------------------------------

 

若是咱们没有本身的数据库，也想创建一个银行网点的分布图，应该如何作呢？

在下一章，咱们将学会，如何利用百度地图的数据库来创建全国银行网点的查询地图。