- 如何创建一个网页文件
- 怎样利用百度地图API建立一张2D地图，以及3D地图
- 如何添加对地图进行鼠标和键盘操作的功能
-------------------------------------------------------------------------------------------------------------------
一、创建网页文件
粘贴以下代码至记事本中，保存文件为bank1-1.htm文件。
点击这里运行程序。
<!
DOCTYPE html
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
酸奶小妹——百度地图API学习
</
title
>
</
head
>
<
body
>
在这里填入你的地图程序
</
body
>
</
html
>
二、使用百度地图API建立一张简单的地图
1、引用API的js，放置bank1-1.htm的<head></head>中
说明：
v=1.1这是API的版本，表明是1.1版本的。
sercices=false是指，不开启地图服务，例如公交驾车查询等。
<
script
type
="text/javascript"
src
="http://api.map.baidu.com/api?v=1.1&services=false"
></
script
>
2、设置地图容器的样式，放置<head></head>中
说明：
制定容器高度后，方能显示出地图。
<style type="text/css">
html
{
height
:
100%
}
body
{
height
:
100%
;
margin
:
0px
;
padding
:
0px
}
#milkMap
{
height
:
100%
}
</style>
你还可以自己规定容器的高度、宽度，边框颜色等。比如
<style type="text/css">
html
{
height
:
100%
}
body
{
height
:
100%
;
margin
:
0px
;
padding
:
0px
}
#milkMap
{
height
:
400px
;
width
:
600px
;
border
:
1px solid blue
;
}
</style>
3、在<body></body>中放置地图容器
说明：id号是唯一的，在创建地图的js中，要与此id对应起来。
<
div
id
="milkMap"
></
div
>
4、在</body></html>中放置自己的js
说明：
创建地图使用new BMap.Map，创建点使用new BMap.Point。
创建地图需要设置地图中心点，与地图级别。1级最大，能看见全球；18级最小，最详细。
其中地图级别的对应关系为，4级-国； 8级-省， 12级-市， 18级-街道。
<
script type
=
"
text/javascript
"
>
var
map
=
new
BMap.Map(
"
milkMap
"
);
//
创建地图实例
var
point
=
new
BMap.Point(
116.404
,
39.915
);
//
创建点坐标
map.centerAndZoom(point,
15
);
//
初始化地图，设置中心点坐标和地图级别
<
/
script>
4、一张2D地图就创建完毕了。接下来，你可以运行你的地图程序。
点击这里运行程序。
三、制作3D地图
说明：
说明：
使用 BMAP_PERSPECTIVE_MAP 使地图变成3D类型。设置3D地图，需要首先setCurrentCity，设置当前城市。
目前，只支持北上广深四个城市的3D图。
点击这里运行程序。
<!
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,
18
);
//
初始化地图，设置中心点坐标和地图级别
map.setMapType(BMAP_PERSPECTIVE_MAP);
//
修改地图类型为3D地图
map.setCurrentCity(
"
北京市
"
);
//
设置当前城市
</
script
>
</
html
>
四、添加对地图进行鼠标和键盘操作的功能
开启滚轮缩放功能，该功能默认是禁用的。
关闭双击放大功能,该功能默认是开启的。
enableScrollWheelZoom(); //开启滚轮缩放功能
disableDoubleClickZoom(); //关闭双击放大功能
开启键盘操作功能，该功能默认禁用。
键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
enableKeyboard(); //开启键盘操作功能
下面我们来看一下完整的程序。点击这里运行程序。
<!
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"
style
="float:left;"
></
div
>
<
div
style
="float:right;width:400px;"
>
<
p
>
开启滚轮缩放
</
p
>
<
p
>
关闭双击放大
</
p
>
<
p
>
开启键盘操作
</
p
>
<
p
>
说明:键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
</
p
>
</
div
>
</
body
>
<
script
type
="text/javascript"
>
var
map
=
new
BMap.Map(
"
milkMap
"
);
//
创建地图实例
var
point
=
new
BMap.Point(
116.404
,
39.915
);
//
创建点坐标
map.centerAndZoom(point,
18
);
//
初始化地图，设置中心点坐标和地图级别
map.setMapType(BMAP_PERSPECTIVE_MAP);
//
修改地图类型为3D地图
map.setCurrentCity(
"
北京市
"
);
//
设置当前城市
map.enableScrollWheelZoom();
//
开启滚轮缩放功能
map.disableDoubleClickZoom();
//
关闭双击放大功能
map.enableKeyboard();
//
开启键盘操作功能
</
script
>
</
html
>
更多功能，请查看API官网->类参考->Map类 ,你可以看到很多关于地图的操作。