码迷，mamicode.com
首页 > Windows程序 > 详细

百度地图API学习总结

时间：2015-01-08 19:52:15      阅读：235      评论：0      收藏：0      [点我收藏+]

标签：

 

一、百度地图API介绍

 

百度地图API是可以给开发人员调用的开放API，我们可以用Javascript语言进行调用；

听起来API这个概念很抽象，初学者想：“百度的API，我们怎么能调用？”，其实不是这样，我们通过一个URL地址进行引用，然后就可以调用他的API；

不需要Web服务器，只需要一个浏览器就能够使用百度地图API；

 

二、调用API的基本文件格式

 

以下为开发百度地图API的最基础代码：

 

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <!--引用百度地图-->  
  4.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
  5.         </script>  
  6.         <title>  
  7.             如何调用API  
  8.         </title>  
  9.                 <!--  
  10.         设计样式   
  11.             container容器：占50%大小  
  12.         -->  
  13.         <style type="text/css">  
  14.         #container{  
  15.             width:50%;  
  16.             height:50%;   
  17.         }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div id="container"></div>  
  22.         <script type="text/javascript">  
  23.             var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;  
  24.             var point = new BMap.Point(500,500);//定位  
  25.             map.centerAndZoom(point,15);                //将point移到浏览器中心，并且地图大小调整为15;  
  26.               
  27.             <!--以后只需要在此处添加代码即可-->  
  28.         </script>  
  29.     </body>  
  30. </html>  
 

三、常用技术

 

1.创建地图： var map = new BMap.Map("divid");

2.创建坐标点：var point = new BMap.Point("经度","纬度");

3.设置视图中心点：map.centerAndZoom(point,size);

4.激活滚轮调整大小功能：map.enableScrollWheelZoom();

5.添加控件：map.addControl(new BMap.Xxx());

6.添加覆盖物：map.addOverlay();

 

 

控件介绍

 

1.NavigationControl：缩放地图的控件，默认在左上角；

2.OverviewMapControl：地图的缩略图的控件，默认在右下方；

3.ScaleControl：地图显示比例的控件，默认在左下方；

4.MapTypeControl：地图类型控件，默认在右上方；

如下图所示：

 技术分享

 

map.addControl()方法添加控件；

代码示例：

 

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <!--引用百度地图-->  
  4.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
  5.         </script>  
  6.         <title>  
  7.             控件使用  
  8.         </title>  
  9.                 <!--  
  10.         设计样式   
  11.             container容器：占50%大小  
  12.         -->  
  13.         <style type="text/css">  
  14.         #container{  
  15.             width:50%;  
  16.             height:50%;   
  17.         }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div id="container"></div>  
  22.         <script type="text/javascript">  
  23.             var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;  
  24.             var point = new BMap.Point(500,500);//定位  
  25.             map.centerAndZoom(point,15);                //将point移到浏览器中心，并且地图大小调整为15;  
  26.             map.addControl(new BMap.NavigationControl());  
  27.             map.addControl(new BMap.MapTypeControl());  
  28.             map.addControl(new BMap.ScaleControl());  
  29.             map.addControl(new BMap.OverviewMapControl());  
  30.         </script>  
  31.     </body>  
  32. </html>  

 

覆盖物介绍

 

覆盖物就是覆盖在地图上的某个事物；

 

1.标注：Marker

 技术分享

(1)在point处添加标注：var marker = new BMap.Marker(point);     

(2)添加覆盖物：map.addOverlay(marker);

(3)激活标注的拖拽功能：marker.enableDragging();

(4)为标注添加事件：marker.addEventListener("名称",function(){

    //点击标注后的事件

});

(5)删除覆盖物：map.removeOverlay(marker);

(6)销毁标注：marker.dispose();

 

2.信息窗口：InfoWindow

 技术分享

(1)在某个特定的位置创建一个信息窗口：var infowindow = new BMap.InfoWindow("内容",{width:250,height:100,title:"hello"});

(2)在地图中央打开信息窗口：map.openInfoWindow(infoWindow,map.getCenter());

 

3.折线：Polyline

 

(1)var polyline = new BMap.Polyline([new BMap.Point(X1,Y1),new BMap.Point(X2,Y2),new BMap.Point(X3,Y3)],{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});

(2)map.addOverlay(polyline);

 

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <!--引用百度地图-->  
  4.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
  5.         </script>  
  6.         <title>  
  7.             如何调用API  
  8.         </title>  
  9.                 <!--  
  10.         设计样式   
  11.             container容器：占50%大小  
  12.         -->  
  13.         <style type="text/css">  
  14.         #container{  
  15.             width:50%;  
  16.             height:50%;   
  17.         }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div id="container"></div>  
  22.         <script type="text/javascript">  
  23.             var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;  
  24.             var point = new BMap.Point(116.404, 39.915);//定位  
  25.             map.centerAndZoom(point,15);                //将point移到浏览器中心，并且地图大小调整为15;  
  26.               
  27.             //标注  
  28.             var marker = new BMap.Marker(point);  
  29.             map.addOverlay(marker);  
  30.             marker.addEventListener("click",function(){ //点击标注时出发事件  
  31.                 alert("您点击了标注");  
  32.             });  
  33.             marker.enableDragging();    //标注可拖拽  
  34.               
  35.             //创建信息窗口  
  36.             var opts = {    
  37.                 width : 250,     // 信息窗口宽度    
  38.                 height: 100,     // 信息窗口高度    
  39.                 title : "Hello"  // 信息窗口标题    
  40.             }    
  41.             var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
  42.             map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口   
  43.               
  44.             //折线  
  45.             var polyline = new BMap.Polyline([    
  46.                     new BMap.Point(116.399, 39.910),    
  47.                     new BMap.Point(116.405, 39.920),  
  48.                     new BMap.Point(117.321,40.321)    
  49.                         ],    
  50.                         {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  //蓝色、宽度为6  
  51.             );    
  52.             map.addOverlay(polyline);    
  53.               
  54.         </script>  
  55.     </body>  
  56. </html>  
 

 

四、常见问题

 

1.怎么获得我想查找的地理位置的经度和纬度？

 

http://dev.baidu.com/wiki/static/map/API/tool/creatMap/

 

2.哪里有学习百度地图API的示例代码？

 

http://dev.baidu.com/wiki/static/map/API/examples/index.html

 

 

【转载】http://blog.csdn.net/xiazdong/article/details/7381142

 

百度地图API学习总结

标签：

原文地址：http://www.cnblogs.com/julin-peng/p/4211697.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！