原文:

摘要：

　　我有一定的房产数据，还有银行数据。我想在百度地图上标注出来，并且能搜索到我这些数据。

　　可是百度的数据库上并没有我的数据。我应该怎么办呢？

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

一、无需数据库，如何建立自己的地理信息表。

如果让初学者去建立数据库，那么意味着大家还要学习数据库，以及网站后端的知识。为了方便大家学习，使大家能够快速地掌握如何构建房产地图，银行地图等，酸奶小妹教大家一个“把数据存储在前端”，“搜索自己数据”的一个办法。（本文章要特别感谢不怕冷的小蚊子）

首先，我们需要为自己的数据建立一个数组，把它们存储起来。像这样。

//

标注点数组

var

BASEDATA

=

[

{title:

"

奥亚酒店

"

,content:

"

北苑路169号

"

,point:

"

116.422792|40.009471

"

,isOpen:

1

,icon:{w:

21

,h:

21

,l:

115

,t:

46

,x:

1

,lb:

10

}},

{title:

"

珀丽酒店

"

,content:

"

将台西路8号

"

,point:

"

116.484289|39.97936

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

贵国酒店

"

,content:

"

左家庄1号

"

,point:

"

116.454494|39.964011

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

科通酒店

"

,content:

"

民族园路8号院2号楼

"

,point:

"

116.394601|39.987925

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

将台酒店

"

,content:

"

酒仙桥路甲12号

"

,point:

"

116.496024|39.976864

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

成宏酒店

"

,content:

"

北四环东路惠新东桥西北侧

"

,point:

"

116.429445|39.995392

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

华商酒店

"

,content:

"

延静西里2号

"

,point:

"

116.488962|39.921939

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

标华酒店

"

,content:

"

北京市 朝阳区红庙路柴家湾1号

"

,point:

"

116.489284|39.92104

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

万程酒店

"

,content:

"

天坛路89号

"

,point:

"

116.411762|39.89457

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

黎昌酒店

"

,content:

"

永定门外彭庄乙58号

"

,point:

"

116.393532|39.876272

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

北京银行

"

,content:

"

北京市海淀区白石桥路39号

"

,point:

"

116.329593|39.952398

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

海淀银行

"

,content:

"

丹棱街16西门

"

,point:

"

116.315551|39.984388

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

北京银行

"

,content:

"

北京市西城区文津街附近

"

,point:

"

116.391713|39.929007

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

首都银行

"

,content:

"

东三环南路88号

"

,point:

"

116.469899|39.87684

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

国家银行

"

,content:

"

中关村南大街33号

"

,point:

"

116.331292|39.949031

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

崇文区银行

"

,content:

"

北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内

"

,point:

"

116.427671|39.903568

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

朝阳区银行

"

,content:

"

北京市朝阳区朝外小庄金台里17号

"

,point:

"

116.47766|39.922295

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

宣武区银行

"

,content:

"

教子胡同8号

"

,point:

"

116.374561|39.894302

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

东城区银行

"

,content:

"

交道口东大街85号

"

,point:

"

116.41927|39.9474

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

西城区银行

"

,content:

"

北京市西城区后广平胡同26号

"

,point:

"

116.368099|39.942332

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}}

]

注意：这部分是写在js里的。

其中，title是信息窗口打开后的标题，同时也是label标签的取值；

content是信息窗口的内容；

point是经纬度，请使用百度坐标（获取地址：）；

isopen是控制信息窗口是否打开的开关；

icon里的选项是控制marker图片的，width是宽、hight是高等等。

二、如何查找，并显示自己的数据

你需要在html中写一个搜索框，一个搜索按钮。

<

p

>

<

input

id

="keyword"

type

="text"

style

="width:150px;"

value

="银行"

/>

<

input

type

="button"

value

="搜索"

onclick

="search('type','show','keyword')"

/>

</

p

>

搜索框，需要一个id，例如keyword来传递要搜索的参数。我写了银行。本案例中，由于有酒店数据，你还可以写酒店。

搜索按钮，上面需要一个点击事件onclick="search('type','show','keyword')"。根据type类型、show是否显示、keyword关键词来做搜索。

那么，当搜索的内容，就是id=keyword里面的keyword和我自己的数据，就是步骤一里的数组，相同时，我就创建一个marker标注，并且默认打开它的信息窗口。

 

window.search

=

function

(name_t,name_s,id_d){

var

t_o

=

document.getElementsByName(name_t);

var

s_o

=

document.getElementsByName(name_s);

var

s_v,t_v,d_v

=

document.getElementById(id_d).value;

for

(

var

i

=

0

; i

<

t_o.length; i

++

){

if

(t_o[i].checked){

t_v

=

t_o[i].value;

}

}

for

(

var

i

=

0

; i

<

s_o.length; i

++

){

if

(s_o[i].checked){

s_v

=

s_o[i].value;

}

}

searchClass.trim(t_v)

==

""

&&

(t_v

=

"

single

"

);

var

dd

=

searchClass.search({k:

"

title

"

,d:d_v,t:t_v,s:s_v});

addMarker(dd);

//

向地图中添加marker

}

三、全部源代码

为了更加符合用户的搜索习惯，我设计了精确超找、和模糊查找两种情况。

精确查找：就是用户输入的keyword，和我数据库里的一摸一样 时，就打开信息窗口。这时候一般只能打开一个。因为你自己的数据应该不会有重复的。

模糊查找：比如查找酒店，会显示全部的酒店。比如查找银行，会显示全部的银行数据。默认打开第一个的信息窗口。

为了方便大家看到我添加进去的数据信息，这里还设计了“仅查找到的内容”和“显示所有的内容”。

仅查找到的内容：用户搜什么，就显示出什么来。

显示所有的内容：显示我全部添加的数据。

全部源代码在这里，我减去了很多数据。大家可以自己添加。

<

html

>

<

head

>

<

meta

http-equiv

="Content-Type"

content

="text/html; charset=gb2312"

/>

<

title

>

自家数据+前端搜索

</

title

>

<

script

type

="text/javascript"

src

="http://api.map.baidu.com/api?v=1.1&services=true"

></

script

>

</

head

>

<

body

>

<

div

style

="width:520px;height:340px;border:1px solid gray"

id

="container"

></

div

>

<

p

>

二选一：

<

input

id

="type1"

type

="radio"

name

="type"

value

="single"

/><

label

for

="type1"

>

精准查找

</

label

>

<

input

id

="type2"

type

="radio"

name

="type"

value

="more"

checked

="checked"

/><

label

for

="type2"

>

模糊查找

</

label

>

</

p

>

<

p

>

二选一：

<

input

id

="show1"

type

="radio"

name

="show"

value

=""

checked

="checked"

/><

label

for

="show1"

>

仅查找到的内容

</

label

>

<

input

id

="show2"

type

="radio"

name

="show"

value

="all"

/><

label

for

="show2"

>

显示所有内容

</

label

>

</

p

>

<

p

>

<

input

id

="keyword"

type

="text"

style

="width:150px;"

value

="银行"

/>

<

input

type

="button"

value

="搜索"

onclick

="search('type','show','keyword')"

/>

</

p

>

</

body

>

</

html

>

<

script

type

="text/javascript"

>

//

标注点数组

var

BASEDATA

=

[

{title:

"

奥亚酒店

"

,content:

"

北苑路169号

"

,point:

"

116.422792|40.009471

"

,isOpen:

1

,icon:{w:

21

,h:

21

,l:

115

,t:

46

,x:

1

,lb:

10

}},

{title:

"

珀丽酒店

"

,content:

"

将台西路8号

"

,point:

"

116.484289|39.97936

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

北京银行

"

,content:

"

北京市海淀区白石桥路39号

"

,point:

"

116.329593|39.952398

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

{title:

"

海淀银行

"

,content:

"

丹棱街16西门

"

,point:

"

116.315551|39.984388

"

,isOpen:

0

,icon:{w:

21

,h:

21

,l:

0

,t:

0

,x:

6

,lb:

5

}},

]

//

创建和初始化地图函数：

function

initMap(){

window.map

=

new

BMap.Map(

"

container

"

);

map.centerAndZoom(

new

BMap.Point(

116.412318

,

39.887037

),

12

);

map.enableScrollWheelZoom();

map.addControl(

new

BMap.NavigationControl());

window.searchClass

=

new

SearchClass();

searchClass.setData(BASEDATA)

var

dd

=

searchClass.search({k:

"

title

"

,d:

"

银行

"

,t:

"

more

"

,s:

""

});

//

t:{single|more},s{all|!all}

addMarker(dd);

//

向地图中添加marker

}

window.search

=

function

(name_t,name_s,id_d){

var

t_o

=

document.getElementsByName(name_t);

var

s_o

=

document.getElementsByName(name_s);

var

s_v,t_v,d_v

=

document.getElementById(id_d).value;

for

(

var

i

=

0

; i

<

t_o.length; i

++

){

if

(t_o[i].checked){

t_v

=

t_o[i].value;

}

}

for

(

var

i

=

0

; i

<

s_o.length; i

++

){

if

(s_o[i].checked){

s_v

=

s_o[i].value;

}

}

searchClass.trim(t_v)

==

""

&&

(t_v

=

"

single

"

);

var

dd

=

searchClass.search({k:

"

title

"

,d:d_v,t:t_v,s:s_v});

addMarker(dd);

//

向地图中添加marker

}

//

创建marker

window.addMarker

=

function

(data){

map.clearOverlays();

for

(

var

i

=

0

;i

<

data.length;i

++

){

var

json

=

data[i];

var

p0

=

json.point.split(

"

|

"

)[

0

];

var

p1

=

json.point.split(

"

|

"

)[

1

];

var

point

=

new

BMap.Point(p0,p1);

var

iconImg

=

createIcon(json.icon);

var

marker

=

new

BMap.Marker(point,{icon:iconImg});

var

iw

=

createInfoWindow(i);

var

label

=

new

BMap.Label(json.title,{

"

offset

"

:

new

BMap.Size(json.icon.lb

-

json.icon.x

+

10

,

-

20

)});

marker.setLabel(label);

map.addOverlay(marker);

label.setStyle({

borderColor:

"

#808080

"

,

color:

"

#333

"

,

cursor:

"

pointer

"

});

(

function

(){

var

_json

=

json;

var

_iw

=

createInfoWindow(_json);

var

_marker

=

marker;

_marker.addEventListener(

"

click

"

,

function

(){

this

.openInfoWindow(_iw);

});

_iw.addEventListener(

"

open

"

,

function

(){

_marker.getLabel().hide();

})

_iw.addEventListener(

"

close

"

,

function

(){

_marker.getLabel().show();

})

label.addEventListener(

"

click

"

,

function

(){

_marker.openInfoWindow(_iw);

})

if

(

!!

json.isOpen){

label.hide();

_marker.openInfoWindow(_iw);

}

})()

}

}

//

创建InfoWindow

function

createInfoWindow(json){

var

iw

=

new

BMap.InfoWindow(

"

<b class='iw_poi_title' title='

"

+

json.title

+

"

'>

"

+

json.title

+

"

</b><div class='iw_poi_content'>

"

+

json.content

+

"

</div>

"

);

return

iw;

}

//

创建一个Icon

function

createIcon(json){

var

icon

=

new

BMap.Icon(

"

http://openapi.baidu.com/map/images/us_mk_icon.png

"

,

new

BMap.Size(json.w,json.h),{imageOffset:

new

BMap.Size(

-

json.l,

-

json.t),infoWindowOffset:

new

BMap.Size(json.lb

+

5

,

1

),offset:

new

BMap.Size(json.x,json.h)})

return

icon;

}

function

SearchClass(data){

this

.datas

=

data;

}

//

rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}

SearchClass.prototype.search

=

function

(rule){

if

(

this

.datas

==

null

){alert(

"

数据不存在!

"

);

return

false

;}

if

(

this

.trim(rule)

==

""

||

this

.trim(rule.d)

==

""

||

this

.trim(rule.k)

==

""

||

this

.trim(rule.t)

==

""

){alert(

"

请指定要搜索内容!

"

);

return

false

;}

var

reval

=

[];

var

datas

=

this

.datas;

var

len

=

datas.length;

var

me

=

this

;

var

ruleReg

=

new

RegExp(

this

.trim(rule.d));

var

hasOpen

=

false

;

var

addData

=

function

(data,isOpen){

//

第一条数据打开信息窗口

if

(isOpen

&&

!

hasOpen){

hasOpen

=

true

;

data.isOpen

=

1

;

}

else

{

data.isOpen

=

0

;

}

reval.push(data);

}

var

getData

=

function

(data,key){

var

ks

=

me.trim(key).split(

/

\.

/

);

var

i

=

null

,s

=

"

data

"

;

if

(ks.length

==

0

){

return

data;

}

else

{

for

(

var

i

=

0

; i

<

ks.length; i

++

){

s

+=

'

["

'

+

ks[i]

+

'

"]

'

;

}

return

eval(s);

}

}

for

(

var

cnt

=

0

; cnt

<

len; cnt

++

){

var

data

=

datas[cnt];

var

d

=

getData(data,rule.k);

if

(rule.t

==

"

single

"

&&

rule.d

==

d){

addData(data,

true

);

}

else

if

(rule.t

!=

"

single

"

&&

ruleReg.test(d)){

addData(data,

true

);

}

else

if

(rule.s

==

"

all

"

){

addData(data,

false

);

}

}

return

reval;

}

SearchClass.prototype.setData

=

function

(data){

this

.datas

=

data;

}

SearchClass.prototype.trim

=

function

(str){

if

(str

==

null

){str

=

""

;}

else

{ str

=

str.toString();}

return

str.replace(

/

(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)

/

g,

""

);

}

initMap();

//

创建和初始化地图

</

script

>

四、示例运行请点击以下网址