第一步:加载百度地图API,ak为百度开发者平台申请的密钥
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
第二步:定义一个存放地图的div
<div id="baiduMap"></div>
第三步:加载地图
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("baiduMap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
所有步骤都是官网的例子,然而并没有显示出地图
经过仔细检查,原来差了一步
设置CSS:
<style type="text/css">
body, html,#baiduMap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
这个很重要,如果不指定大小,div的高度为0,所以不会显示出地图
一切就绪,地图出来了。。。