zoukankan      html  css  js  c++  java
  • 百度地图API学习总结

     

    一、百度地图API介绍

     

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

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

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

     

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

     

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


    <html>
    	<head>
    		<!--引用百度地图-->
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
    		</script>
    		<title>
    			如何调用API
    		</title>
    				<!--
    		设计样式 
    			container容器:占50%大小
    		-->
    		<style type="text/css">
    		#container{
    			50%;
    			height:50%;	
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container"></div>
    		<script type="text/javascript">
    			var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
    			var point = new BMap.Point(500,500);//定位
    			map.centerAndZoom(point,15);				//将point移到浏览器中心,并且地图大小调整为15;
    			
    			<!--以后只需要在此处添加代码即可-->
    		</script>
    	</body>
    </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>
    	<head>
    		<!--引用百度地图-->
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
    		</script>
    		<title>
    			控件使用
    		</title>
    				<!--
    		设计样式 
    			container容器:占50%大小
    		-->
    		<style type="text/css">
    		#container{
    			50%;
    			height:50%;	
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container"></div>
    		<script type="text/javascript">
    			var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
    			var point = new BMap.Point(500,500);//定位
    			map.centerAndZoom(point,15);				//将point移到浏览器中心,并且地图大小调整为15;
    			map.addControl(new BMap.NavigationControl());
    			map.addControl(new BMap.MapTypeControl());
    			map.addControl(new BMap.ScaleControl());
    			map.addControl(new BMap.OverviewMapControl());
    		</script>
    	</body>
    </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("内容",{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>
    	<head>
    		<!--引用百度地图-->
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
    		</script>
    		<title>
    			如何调用API
    		</title>
    				<!--
    		设计样式 
    			container容器:占50%大小
    		-->
    		<style type="text/css">
    		#container{
    			50%;
    			height:50%;	
    		}
    		</style>
    	</head>
    	<body>
    		<div id="container"></div>
    		<script type="text/javascript">
    			var map = new BMap.Map("container");//在container容器中创建一个地图,参数container为div的id属性;
    			var point = new BMap.Point(116.404, 39.915);//定位
    			map.centerAndZoom(point,15);				//将point移到浏览器中心,并且地图大小调整为15;
    			
    			//标注
    			var marker = new BMap.Marker(point);
    			map.addOverlay(marker);
    			marker.addEventListener("click",function(){	//点击标注时出发事件
    				alert("您点击了标注");
    			});
    			marker.enableDragging();	//标注可拖拽
    			
    			//创建信息窗口
    			var opts = {  
     				width : 250,     // 信息窗口宽度  
     				height: 100,     // 信息窗口高度  
     				title : "Hello"  // 信息窗口标题  
    			}  
    			var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象  
    			map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口 
    			
    			//折线
    			var polyline = new BMap.Polyline([  
       					new BMap.Point(116.399, 39.910),  
      					new BMap.Point(116.405, 39.920),
      					new BMap.Point(117.321,40.321)  
     						],  
     						{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  //蓝色、宽度为6
    			);  
    			map.addOverlay(polyline);  
    			
    		</script>
    	</body>
    </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

     

     

  • 相关阅读:
    linux利用grep查看打印匹配的下几行或前后几行的命令
    Linux NetHogs监控工具介绍
    db2 查看进程 db2中的常用命令及使用方法
    Linux python <tab>自动补全
    Saltstack pillar组件
    History(历史)命令用法
    Saltstack grains组件
    Saltstack常用模块及API
    文本处理三剑客之AWK的用法
    linux程序调试命令strace
  • 原文地址:https://www.cnblogs.com/xiazdong/p/3058050.html
Copyright © 2011-2022 走看看