前端百度地图

项目中有一个需求是使用到百度地图的，所以学习了一下怎么在网页中使用百度地图

首先要成为百度地图开发者，成为开发者晚上有很多教程，百度一下就可以了。

1.成为了开发者之后会有一个key,要在index.html里面引入key，注意是和src同级的。

直接使用script标签引入

2.初始化地图

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);          // 初始化地图，设置中心点坐标和地图级别

3.创建标注和信息窗口

var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 

//在标注上创建信息窗口
	var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "海底捞王府井店" , // 信息窗口标题
	}
	var infoWindow = new BMap.InfoWindow(opts);  // 创建信息窗口对象 
	marker.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	});

简化版的流程就是这样子，项目中可能会有其他需求，比如窗口要有图标等，详细的可以查看官方文档：lbsyun.baidu.com/index.php?t…