1、进入百度地图开发者平台网站
进入web开发 
2、注册百度开发者账号 
3.阅读开放平台概述 
4.创建应用 
创建完成： 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#map{width: 100%;height: 100%;}
</style>
<!--引入百度地图API接口以及创建应用的AK-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=VU8AvenH7fZ4lf00DATgVDFf5GF5ZAwc"></script>
</head>
<body>
<!--地图存放位置-->
<div id="map"></div>
</body>
<script src="js/UMap.js"></script>
<script src="js/baidu.js"></script>
</html>
//baidu.js文件
function init(){
//设置地图的显示类型 及缩放最小值
var opt={mapType:BMAP_NORMAL_MAP,minZoom:4};
var map=new BMap.Map('map',opt);
//初始化地图
map.centerAndZoom("北京");
var center=new BMap.Point(116.519072,39.931867);
map.centerAndZoom(center,18);
//禁止拖拽
map.disableDragging();
//禁用双击放大
map.disableDoubleClickZoom();
//启用滚轮放大缩小
map.enableScrollWheelZoom();
//右键启用地图拖拽
map.addEventListener('rightclick',function(){
map.enableDragging();
});
//创建定位控件 img/icon.jpg定位图片
var location=new BMap.GeolocationControl({
locationIcon:new BMap.Icon('img/icon.jpg',new BMap.Size(50,50))
});
//控件位置右上角
location.setAnchor(BMAP_ANCHOR_TOP_RIGHT);
//控件偏移
location.setOffset(new BMap.Size(100,50));
map.addControl(location);
//右键双击隐藏/开启控件
map.addEventListener("rightdblclick",function () {
location.isVisible()?location.hide():location.show();
});
//返回当前的定位信息，若当前还未定位，则返回nul
setTimeout(function(){
location.location();
console.log(location.getAddressComponent());
},3*1000);
//定位成功触发事件
map.addEventListener("locationSuccess",function (result) {
console.log(result);
});
//地图类型控件可选项
var mapTypeControl=new BMap.MapTypeControl({
type:BMAP_MAPTYPE_CONTROL_MAP,
mapTypes:[BMAP_NORMAL_MAP,BMAP_PERSPECTIVE_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP],
offset:new BMap.Size(5,80)
});
map.addControl(mapTypeControl);
//设置版权控件位置
var CopyrightControl = new BMap.CopyrightControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset:new BMap.Size(100,20)
});
//添加版权控件
map.addControl(CopyrightControl);
//返回地图可视区域
var getBounds= map.getBounds();
//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
CopyrightControl.addCopyright({
id: 1,
content: "<a href='#' style='font-size:20px;background:red;color:white'>我是百度 我怕谁</a>",
bounds: getBounds
});
//全景控件
var PanoramaControl=new BMap.PanoramaControl()
map.addControl(PanoramaControl);
//实例化新创建的控件放到map上
var ScaleControl= new UMap.ScaleControl();
map.addControl(ScaleControl);
//创建自定义图标代替大头针
var icon = new BMap.Icon('img/baidu.png',new BMap.Size(40,40));
icon.setImageSize(new BMap.Size(40,40));
//创建大头针标注
var marker = new BMap.Marker(center,{
icon:icon,
//微调大头针箭头指向误差
offset:new BMap.Size(85,25)
});
map.addOverlay(marker);
//坠落动画
marker.setAnimation(BMAP_ANIMATION_DROP);
//双击创建大头针 像素坐标 经纬度坐标 互相转换
map.addEventListener("dblclick",function (event) {
var icon = new BMap.Icon('img/baidu.png',new BMap.Size(40,40));
icon.setImageSize(new BMap.Size(40,40));
var marker = new BMap.Marker(event.point,{
icon:icon
});
//将setAnimation放到addOverlay后 创建大头针跳动效果
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
});
}
init();//UMap.js文件 自定义控件
window.UMap = window.UMap || {};
(function() {
function ScaleControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(50, 50);
}
ScaleControl.prototype = new BMap.Control();
ScaleControl.prototype.initialize = function(map) {
//创建button按钮
var container = document.createElement("div");
var maxButton = document.createElement('button');
var minButton = document.createElement('button');
maxButton.textContent='+';
minButton.textContent='-';
container.appendChild(maxButton);
container.appendChild(minButton);
maxButton.style.cssText = minButton.style.cssText = "font-size:20px;padding:2px 5px";
//点击地图放大或缩小
maxButton.onclick=minButton.onclick=function(){
this.textContent=='+'?map.zoomIn():map.zoomOut();
};
map.getContainer().appendChild(container);
return container;
};
UMap.ScaleControl = ScaleControl;
})();
实时定位 