百度地图api调用

API类参考，可以查看官方文档

引入所需js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

定义地图显示区域

<div id="mapArea" style="width:800px;height:800px"></div>

编写js进行地图的实例化

!!!注意,相关js代码必须写到body标签后面

var map = new BMap.Map("mapArea");
//创建坐标,输入经纬度,此经纬度为天安门处
var point = new BMap.Point(116.404,39.915);
//设置中心点坐标和地图级别(数字越大,放大倍数越大)
map.centerAndZoom(point,15);

//如需开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);

可以向地图添加所需控件

控件	类名	简介
平移缩放控件	NavigationControl	地图的平移和缩放功能,默认位于左上方
缩略地图	OverviewMapControl	可折叠的缩略地图,默认位于右下方
比例尺	ScaleControl	地图的比例关系,默认位于左下方
地图类型	MapTypeControl	切换地图类型(默认,卫星...),默认位于右上方
定位	GeolocationControl	定位按钮,默认位于左下方

//可以添加多个控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
//...

同时,每个控件都可以加入位置和位置偏移的配置信息

map.addControl(new BMap.MapTYpeControl({
    anchor:BMAP_ANCHOR_TOP_LEFT,   //位置
    offset:new BMap.Size(150,5) //偏移
}))

位置可选如下

anchor值	位置说明
BMAP_ANCHOR_TOP_LEFT	左上角
BMAP_ANCHOR_TOP_RIGHT	右上角
BMAP_ANCHOR_BOTTOM_LEFT	左下角
BMAP_ANCHOR_BOTTOM_RIGHT	右下角

如果需要,可以向地图内添加覆盖物:坐标点,图形,信息窗口...

添加坐标点

var marker = new BMap.Marker(new BMap.Point(116.404,39.915));  //定义一个坐标点
map.addOverlay(marker);  //将他添加到地图中

同时可以给坐标点添加事件监听

//点击事件
marker.addEventListener("click",function(){
    alert("您点击了坐标点");
})
//拖拽事件
//开启拖拽
marker.enableDragging();
marker.addEventListener("dragend",function(e){
    alert("当前位置:"+e.point.lng+", "+e.point.lat);
})

添加信息窗口

var infoWindow = new BMap.InfoWindow("content",{
    width:250,
    height:100,
    title:"title"
});
map.openInfoWindow(infoWindow,map.getCenter());

具体更多覆盖物可以查看官方文档

事件处理

主要方法:obj.addEventListener("event",callback);

点击事件

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404,39.915),11);
map.addEventListener("click",function(){
    alert("您点击了地图。");
})

拖拽事件

//开启拖拽
marker.enableDragging();
//同时方法也可以携带参数
marker.addEventListener("dragend",function(e){
    alert("当前位置:"+e.point.lng+", "+e.point.lat);
})

具体更多事件可以查看官方文档