百度地图js——API使用
基本使用
引用百度API资源
<!--引用资源-->
<!--百度地图基础API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hHK8kZt3v2umxvzLtST4rCMyiZRFnfbc"></script>
百度地图容器
<div id="container"></div>
实例化百度地图js代码
// 创建地图实例,"container"就是百度地图的div容器
var map = new BMap.Map("container");
//创建坐标点,第一个参数是经度,第二个参数是纬度
var point = new BMap.Point(111.68, 29.05);
//设置地图中心点和缩放级别,级别区间为3~18
map.centerAndZoom(point, 12);
//允许滚轮缩放
map.enableScrollWheelZoom();
添加比例尺控件
// 左下角,添加比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
//左上角,添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_control); // 测距离的
map.addControl(top_left_navigation); // 左导航默认
效果图
添加监听事件
(详细事件列表请查阅百度地图JSAPI2.0参考类)
//zoomend是缩放监听
ap.addEventListener('zoomend',function(){
//获取当前比例尺级别
var zoom = map.getZoom();
});
为地图添加自定义控件
function ShowLegendControl() {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT ;//默认在左下角
this.defaultOffset = new BMap.Size(5, 5);// 默认偏移量
}
ShowLegendControl.prototype = new BMap.Control();
ShowLegendControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement("div");
div.id = "legend";
div.style.background="White";
div.style.padding="5px";
div.style.opacity=" 0.8";
div.style.borderRadius = "5px 5px 5px 5px";
div.style.width = "100px";
div.style.height = "108px";
div.style.position = "absolute";
$("<div style='border-radius:5px 5px 5px 5px;background-color:#ff0000;text-align:center;height:24px;width:99%;font-size:10px;line-height:25px;color:white'>图例1</div>").appendTo(div);
$("<div style='border-radius:5px 5px 5px 5px;background-color:#ffbb00;text-align:center;height:24px;width:99%;margin-top:3px;font-size:10px;line-height:25px;color:white'>图例2</div>").appendTo(div);
$("<div style='border-radius:5px 5px 5px 5px;background-color:#00aaff;text-align:center;height:24px;width:99%;margin-top:3px;font-size:10px;line-height:25px;color:white'>图例3</div>").appendTo(div);
$("<div style='border-radius:5px 5px 5px 5px;background-color:#00ff04;text-align:center;height:24px;width:99%;margin-top:3px;font-size:10px;line-height:25px;color:white'>图例4</div>").appendTo(div);
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var showLegendCtrl = new ShowLegendControl();
// 添加到地图当中
map.addControl(showLegendCtrl);
//最后微调自定义控件位置
$("#legend").css('left',"30px");
$("#legend").css('bottom',"60px");
效果图