百度地图注册与使用

一、先注册好百度地图账号（实名认证），注册好之后在“我的应用”里面创建属于自己的项目，应用类型选择浏览器端。
二、地图实例
1、在HTML文件里面引入src并添加ak

<script src="https://api.map.baidu.com/apiv=1.0&&type=webgl&ak=“你的秘钥”>
</script>

src里面的秘钥是在自己创建的项目ak中
2、地图存放
div存放地图<div id="container"></div>
3、实例化地图
创建一个地图实例

 var map = new BMapGL.Map("container");

创建一个点

var point = new BMapGL.Point(113.6648, 34.7835);

设置缩放与中心点

map.centerAndZoom(point, 17);

三、地图控件
1、地图控件

var scaleCtrl = new BMapGL.ScaleControl(); 

2、添加比例尺控件

 map.addControl(scaleCtrl);
 var zoomCtrl = new BMapGL.ZoomControl();

3、添加缩放控件

 map.addControl(zoomCtrl);
 var cityCtrl = new BMapGL.CityListControl();

4、添加城市列表控件

 map.addControl(cityCtrl);

5、开启鼠标滚轮缩放

 map.enableScrollWheelZoom(true);

6、开启地球模式

map.setMapType(BMAP_EARTH_MAP);

四、地图的绘制
1、点标记

 var marker = new BMapGL.Marker(point);
 map.addOverlay(marker);

2、多边线

 var polyline = new BMapGL.Polyline(tempList, { strokeColor: "blue",    strokeWeight: 2, strokeOpacity: 0.5 })
 map.addOverlay(polyline);

3、多边形

 var polygon = new BMapGL.Polygon(tempList,{ strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "#f00" })
 // 把多边形面绘制到画面中
 map.addOverlay(polygon);

4、圆形

var circle = new BMapGL.Circle(point, 1000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
 //创建圆 
 map.addOverlay(circle);

5、文本标记
①、内容

var content = '中国<strong>前端</strong>学习基地';

②、设置

 var label = new BMapGL.Label(content, {       // 创建文本标注
     position: point,
     offset: new BMapGL.Size(10, 20)
        })
 map.addOverlay(label);

③、样式

 label.setStyle({  // 设置label的样式
    color: '#f30',
    fontSize: '12px',
    border: '2px solid #f70'
})

④、选项

var opts = {
   width: 200,     // 信息窗口宽度
   height: 100,     // 信息窗口高度
   title: "老曾教课的地方", // 信息窗口标题           
}

6、信息窗口

var infoWindow = new BMapGL.InfoWindow("地址：中国<br/><img src='http://statics.qikuedu.com/images/images0903/logo.png' width='100'>", opts); 
 // 创建信息窗口对象 
marker.addEventListener("click", function () {
 map.openInfoWindow(infoWindow, point); //开启信息窗口
 });

五、事件
1、地理位置检索

 var local = new BMapGL.LocalSearch(map, {
     renderOptions: { map: map }
 });

2、执行地图搜索功能

local.search("火锅");