我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片。但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口,通过进行直接的调用就可以了。
下面我来教你怎么在网页中用好百度地图,当然了,你也可以去百度地图网站去查找相关的技术资料。
首先你需要进入到百度地图官网http://developer.baidu.com/map/ 。因为我们是用的脚本进行加载的,所以我们要选择上图中的第一个“javascript api”,进去之后你会发现它的功能很强大有木有?
这里只是它的冰山一角。你可以在最下面“开始体验”。里面有源代码,你可以获取,然后放入到你的网页当中去。不过我今天讲的不是这么简单的。
我需要的是地图层,需要有移动,还需要能进行导航搜索功能。怎么实现呢?Copy下面的这段代码到你的网页中:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
|
<script
type
=”
text
/
javascript”
>
// 百度地图API功能
var
map
=
new
BMap
.
Map
(‘
map’
)
;
var
poi
=
new
BMap
.
Point
(
116.307852
,
40.057031
)
;
map
.
centerAndZoom
(
poi
,
16
)
;
map
.
enableScrollWheelZoom
(
)
;
var
content
=
’
<
div
style
=”
margin:
0
;
line
-
height:
20px
;
padding:
2px
;”
>’
+
‘
<
img
src
=”
.
.
/
img
/
baidu
.
jpg”
alt
=”"
style
=”
float
:
right
;
zoom:
1
;
overflow:
hidden
;
width:
100px
;
height:
100px
;
margin
-
left:
3px
;”
/
>’
+
‘地址:北京市海淀区上地十街
10号
<
br
/
>电话:
(
010
)
59928888
<
br
/
>简介:百度大厦位于北京市海淀区西二旗地铁站附近,为百度公司综合研发及办公总部。’
+
‘
<
/
div
>’
;
//创建检索信息窗口对象
var
searchInfoWindow
=
null
;
searchInfoWindow
=
new
BMapLib
.
SearchInfoWindow
(
map
,
content
,
{
title :
”百度大厦”
,
//标题
width :
290
,
//宽度
height :
105
,
//高度
panel :
”
panel”
,
//检索结果面板
enableAutoPan :
true
,
//自动平移
searchTypes :
[
BMAPLIB_TAB_SEARCH
,
//周边检索
BMAPLIB_TAB_TO_HERE
,
//到这里去
BMAPLIB_TAB_FROM_HERE
//从这里出发
]
}
)
;
var
marker
=
new
BMap
.
Marker
(
poi
)
;
//创建marker对象
marker
.
enableDragging
(
)
;
//marker可拖拽
marker
.
addEventListener
(“
click”
,
function
(
e
)
{
searchInfoWindow
.
open
(
marker
)
;
}
)
map
.
addOverlay
(
marker
)
;
//在地图中添加marker
searchInfoWindow
.
open
(
marker
)
;
//在marker上打开检索信息串口
$
(“
close”
)
.
onclick
=
function
(
)
{
searchInfoWindow
.
close
(
)
;
}
$
(“
open”
)
.
onclick
=
function
(
)
{
var
enableSendToPhone
=
false
;
if
(
$
(“
enableSendToPhone”
)
.
checked
)
{
enableSendToPhone
=
true
;
}
searchInfoWindow
=
new
BMapLib
.
SearchInfoWindow
(
map
,
content
,
{
title :
”百度大厦”
,
//标题
width :
290
,
//宽度
height :
105
,
//高度
panel :
”
panel”
,
//检索结果面板
enableAutoPan :
true
,
//自动平移
enableSendToPhone:
enableSendToPhone
,
//是否启用发送到手机
searchTypes :
[
BMAPLIB_TAB_SEARCH
,
//周边检索
BMAPLIB_TAB_TO_HERE
,
//到这里去
BMAPLIB_TAB_FROM_HERE
//从这里出发
]
}
)
;
if
(
$
(“
enableAutoPan”
)
.
checked
)
{
searchInfoWindow
.
enableAutoPan
(
)
;
}
else
{
searchInfoWindow
.
disableAutoPan
(
)
;
}
;
searchInfoWindow
.
open
(
marker
)
;
}
$
(“
show”
)
.
onclick
=
function
(
)
{
searchInfoWindow
.
show
(
)
;
}
$
(“
hide”
)
.
onclick
=
function
(
)
{
searchInfoWindow
.
hide
(
)
;
}
$
(“
getPosition”
)
.
onclick
=
function
(
)
{
var
position
=
searchInfoWindow
.
getPosition
(
)
;
alert
(“经度:”
+
position
.
lng
+
”;纬度:”
+
position
.
lat
)
;
}
$
(“
setValue”
)
.
onclick
=
function
(
)
{
searchInfoWindow
.
setPosition
(
new
BMap
.
Point
(
$
(“
lng”
)
.
value
,
$
(“
lat”
)
.
value
)
)
;
searchInfoWindow
.
setTitle
(
$
(“
title”
)
.
value
)
;
searchInfoWindow
.
setContent
(
$
(“
content”
)
.
value
)
;
}
$
(“
getContent”
)
.
onclick
=
function
(
)
{
alert
(
searchInfoWindow
.
getContent
(
)
)
;
}
$
(“
getTitle”
)
.
onclick
=
function
(
)
{
alert
(
searchInfoWindow
.
getTitle
(
)
)
;
}
function
$
(
id
)
{
return
document
.
getElementById
(
id
)
;
}
//样式1
var
searchInfoWindow1
=
new
BMapLib
.
SearchInfoWindow
(
map
,
”信息框
1内容”
,
{
title:”信息框
1″
,
//标题
panel :
”
panel”
,
//检索结果面板
enableAutoPan :
true
,
//自动平移
searchTypes :
[
BMAPLIB_TAB_FROM_HERE
,
//从这里出发
BMAPLIB_TAB_SEARCH
//周边检索
]
}
)
;
function
openInfoWindow1
(
)
{
searchInfoWindow1
.
open
(
new
BMap
.
Point
(
116.319852
,
40.057031
)
)
;
}
//样式2
var
searchInfoWindow2
=
new
BMapLib
.
SearchInfoWindow
(
map
,
”信息框
2内容”
,
{
title:
”信息框
2″
,
//标题
panel :
”
panel”
,
//检索结果面板
enableAutoPan :
true
,
//自动平移
searchTypes :
[
BMAPLIB_TAB_SEARCH
//周边检索
]
}
)
;
function
openInfoWindow2
(
)
{
searchInfoWindow2
.
open
(
new
BMap
.
Point
(
116.324852
,
40.057031
)
)
;
}
//样式3
var
searchInfoWindow3
=
new
BMapLib
.
SearchInfoWindow
(
map
,
”信息框
3内容”
,
{
title:
”信息框
3″
,
//标题
width:
290
,
//宽度
height:
40
,
//高度
panel :
”
panel”
,
//检索结果面板
enableAutoPan :
true
,
//自动平移
searchTypes :
[
]
}
)
;
function
openInfoWindow3
(
)
{
searchInfoWindow3
.
open
(
new
BMap
.
Point
(
116.328852
,
40.057031
)
)
;
}
var
isPanelShow
=
false
;
//显示结果面板动作
$
(“
showPanelBtn”
)
.
onclick
=
function
(
)
{
if
(
isPanelShow
==
false
)
{
isPanelShow
=
true
;
$
(“
showPanelBtn”
)
.
style
.
right
=
”
300px”
;
$
(“
panelWrap”
)
.
style
.
width
=
”
300px”
;
$
(“
map”
)
.
style
.
marginRight
=
”
300px”
;
$
(“
showPanelBtn”
)
.
innerHTML
=
”隐藏检索结果面板
<
br
/
>>”
;
}
else
{
isPanelShow
=
false
;
$
(“
showPanelBtn”
)
.
style
.
right
=
”
0px”
;
$
(“
panelWrap”
)
.
style
.
width
=
”
0px”
;
$
(“
map”
)
.
style
.
marginRight
=
”
0px”
;
$
(“
showPanelBtn”
)
.
innerHTML
=
”显示检索结果面板
<
br
/><”;
}
}
</script
>
别以为这样就
ok啦,还有这些也是需要滴!
用来装地图的盒子,盒子里要用
id
=”
map”,还要有这个
js库
<script
type
=”
text
/
javascript”
src
=”
http:
//api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3“></script>
|
别以为这样就ok啦,还有这些也是需要滴!
用来装地图的盒子,盒子里要用 id=”map”,还要有这个js库
1
|
<script
type
=
"text/javascript"
src
=
"<a href="
view
-
source:
http:
//api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3">http://api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3</a>"></script>
|
来看看效果:
这里有些地方是可以更改的var poi = new BMap.Point(116.307852,40.057031);用来修改你具体位置在地图上的坐标点;map.centerAndZoom(poi, 16);可以用来显示地图层的,在地图上滚动你的滑轮你注意下就知道了。
要是我不知道我的具体位置的坐标点或者我想把地点弄的更精确怎么办?
你可以用坐标拾取工具,或者是用快速生成工具
怎么样?这样的用户体验是不是蛮拉轰的?
不过我们需要知道的是,在给用户带来了好的体验的同时也是有损失的。利用对外的加载会让我们的网页打开速度下降。