百度地图jsAPI使用总结(一)基本操作
总结一下这段时间对于百度地图API的使用(API版本2.0)
准备
引用百度API资源
<!--引用资源--> <!--百度地图基础API--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourKey"></script> <!--jquery根据实际需要选择引用,与百度地图API本身不发生关系--> <script type="text/javascript" src="../../jquery/jquery-1.4.4.min.js"></script>
百度地图容器
<div id="container"></div>
百度地图jsAPI使用
实例化百度地图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");