【百度地圖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等後臺程序。

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

 

若是咱們沒有本身的數據庫，也想創建一個銀行網點的分佈圖，應該如何作呢？

在下一章，咱們將學會，如何利用百度地圖的數據庫來創建全國銀行網點的查詢地圖。