首先在百度开发者中心申请ak
在页面head中引用必要的css样式和js脚本
地图展示页面,具体的功能已经注释
name="" id="" value="查询" οnclick="search()" />
id="container">
//创建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 : "版权控件",
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 = "
content = content + "
地点:北京市区";content = content + "
时间:2016-1-9";content += "
";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);
}
实现效果图如下:
按照惯例,最后附一个百度在线api:http://developer.baidu.com/map/jsdemo.htm#i1_1
其实,每个新功能通过api都有详细的demo,所以好的api事半功倍