【百度地图API】建立全国银行位置查询系统(一)——如何创建地图

http://www.cnblogs.com/milkmap/archive/2011/02/22/1960004.html

<摘要>你将在第一章中学会以下知识:

  1. 如何创建一个网页文件
  2. 怎样利用百度地图API建立一张2D地图,以及3D地图
  3. 如何添加对地图进行鼠标和键盘操作的功能

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

一、创建网页文件

粘贴以下代码至记事本中,保存文件为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建立一张简单的地图

百度地图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地图

说明:

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类 ,你可以看到很多关于地图的操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值