首先在百度开发者中心申请ak
在页面head中引用必要的css样式和js脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=个人申请的AK&v=2.0&services=false"></script> <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
地图展示页面，具体的功能已经注释
<body>
<div id="content" class="content">
<input type="text" value="" id="keyword" /> <input type="button"
name="" id="" value="查询" onclick="search()" />
<div style=" 600px; height: 500px; border: 0px solid gray"
id="container"></div>
<p id="tx"></p>
<script type="text/javascript">
//创建Map实例
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
//设置中心点
map.centerAndZoom(point, 11);
map.setCurrentCity("北京");
//添加鼠标滚动缩放
map.enableScrollWheelZoom();
//添加缩略图控件
map.addControl(new BMap.OverviewMapControl({
isOpen : false,
anchor : BMAP_ANCHOR_BOTTOM_RIGHT
}));
//添加缩放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加地图类型控件
map.addControl(new BMap.MapTypeControl());
var cr = new BMap.CopyrightControl({
anchor : BMAP_ANCHOR_TOP_RIGHT
});
//设置版权控件位置
var bs = map.getBounds();
//返回地图可视区域
cr.addCopyright({
id : 1,
content : "<a href='#' style='font-size:16px;'>版权控件</a>",
bounds : bs
})
//添加版权控件
map.addControl(cr);
//全景控件
map.addControl(new BMap.PanoramaControl());
//是否显示路况提示面板
var ctrl = new BMapLib.TrafficControl({
showPanel : false
});
ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
map.addControl(ctrl);
//圆形覆盖物
var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000,
{
fillColor : "red"
});
map.addOverlay(circle);
//设置标注的图标
//var icon = new BMap.Icon("map-marker-icon.png",new BMap.Size(50,50));
// 创建标注
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
//把标注添加到地图上
map.addOverlay(marker);
//信息窗口
var content = "<table>";
content = content + "<tr><td> 地点：北京市区</td></tr>";
content = content + "<tr><td> 时间：2016-1-9</td></tr>";
content += "</table>";
var infowindow = new BMap.InfoWindow(content);
marker.addEventListener("mouseover", function() {
this.openInfoWindow(infowindow);
});
marker.addEventListener("mouseout", function() {
this.closeInfoWindow();
});
//点击地图，获取经纬度坐标
map.addEventListener("click", function(e) {
document.getElementById("tx").innerHTML = "经度坐标：" + e.point.lng
+ " 纬度坐标：" + e.point.lat;
});
//关键字搜索
function search() {
var keyword = document.getElementById("keyword").value;
var local = new BMap.LocalSearch(map, {
renderOptions : {
map : map
}
});
local.search(keyword);
}
</script>
</div>
</body>
实现效果图如下：
按照惯例，最后附一个百度在线api：http://developer.baidu.com/map/jsdemo.htm#i1_1
其实，每个新功能通过api都有详细的demo,所以好的api事半功倍