百度地图API简单用法

如何创建账号并且获取密钥(AK):

首先到百度地图API链接登录账号获取自己的密钥(AK)：

http://api.map.baidu.com
然后一步一步的申请自己的密钥(AK)
获取密钥(AK)后就可以使用百度地图API了

如何使用

首先使用script标签引用页面

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

然后需要一个HTML容器，并且设置样式来填充

<style type="text/css">  
    html{
    height:100%
    }    
    body{
    height:100%;
    margin:0px;
    padding:0px;
    }    
    #container{
    height:100%
    }    
</style> 

<div id="container"></div> 

然后实例化地图

<script>
		var map = new BMap.Map("container");    
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    //根据坐标初始化地图
		map.addControl(new BMap.NavigationControl());         //地图的平移缩放控件  
		map.addControl(new BMap.ScaleControl());              //地图的比例尺
		map.addControl(new BMap.OverviewMapControl());        //缩略地图
		map.addControl(new BMap.MapTypeControl());            //地图类型
		map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   
</script>

最后地图就完美的在页面中显示出来了。

API简介

1.map.centerAndZoom()方法创建地图，第一个参数为中心点，第二个参数是地图缩放大小，最大为19，最小为0。
2.BMap.Map()方法创建地图时候需要一个div容器,参数为div的id。
3.Control：所有控件均继承此类的方法、属性。可实现自定义控件。

4.NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。

5.OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。

6.ScaleControl：默认位于地图左下方，显示地图的比例
7. ZoomControl ：默认位于地图右下方，控制地图级别的缩放

8.MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。

9.CopyrightControl：版权控件，默认位于地图左下方。

10.GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

覆盖物

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物。

地图遮覆盖物:

Overlay：抽象基类，所有的覆盖物均继承此类的方法。

Marker：表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，可以为其添加填充颜色。

Circle: 表示地图上的圆。

代码如下：

<script>
		var map = new BMap.Map("container");    
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    //根据坐标初始化地图
		map.addControl(new BMap.NavigationControl());         //平移缩放控件  
		map.addControl(new BMap.ScaleControl());              //比例尺
		map.addControl(new BMap.OverviewMapControl());        //缩略地图
		map.addControl(new BMap.MapTypeControl());            //地图类型
		map.setCurrentCity("武汉"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   
		var point = new BMap.Point(116.404, 39.915);   
		var marker = new BMap.Marker(point);        // 创建标注   
		map.addOverlay(marker);                     // 将标注添加到地图中
		var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {   
		    // 指定定位位置。  
		    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
		    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
		    // 图标中央下端的尖角位置。   
		    anchor: new BMap.Size(10, 25),   
		    // 设置图片偏移。  
		    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
		    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
		    imageOffset: new BMap.Size(0, 0 - 25)   // 设置图片偏移   
		});     
		    // 创建标注对象并添加到地图  
		var marker = new BMap.Marker(point, {icon: myIcon});   
		map.addOverlay(marker); 
		marker.addEventListener("click", function(){   
		    alert("您点击了标注");   
		});
		var polyline = new BMap.Polyline([
				new BMap.Point(116.399, 39.910),
				new BMap.Point(116.405, 39.920),
				new BMap.Point(116.425, 39.900)
			], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
		map.addOverlay(polyline);
		var polygon = new BMap.Polygon([
		        new BMap.Point(116.387112,39.920977),
		        new BMap.Point(116.385243,39.913063),
		        new BMap.Point(116.394226,39.917988),
		        new BMap.Point(116.401772,39.921364),
		        new BMap.Point(116.41248,39.927893)
		    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
		map.addOverlay(polygon);
			</script>