官网栗子：http://lbsyun.baidu.com/jsdemo.htm#b0_6

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>添加自定义控件</title>
</head>
<body>
<div id="allmap"></div>
<p>在地图左上角添加"放大2级"自定义控件，双击放大地图2级</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}

// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();

// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
</script>

百度地图api添加自定义控件的更多相关文章

  1. 百度地图API 添加标签

    1.手动创建数据,实际项目则是接受GPS信息 /建立坐标点: // lng:经度 lat:纬度 var points = [ {"lng":112.58,"lat&quo ...

  2. 百度地图API：自定义控件

    HTML: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  3. 百度地图API示例之添加自定义控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  4. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  6. 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

    当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...

  7. 百度地图API示例之添加/删除工具条、比例尺控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  8. 百度地图API示例之添加定位相关控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  9. 【百度地图API】如何给自定义覆盖物添加事件

    原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...

随机推荐

  1. python中time类型,datetime类型的关系与互相转换

    一.time模块 time模块提供各种操作时间的函数       一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00:00以秒计算的偏移量),时间戳是惟一 ...

  2. android assets与 assets与res/raw 的相同、不同点

    1.获取资源的输入流 资源文件 sample.txt 位于 $PROJECT_HOME/assets/ 目录下,可以在 Activity 中通过   //也可以放置图片等资源,获取方式相同 Conte ...

  3. zqgame《每日一言》

    优秀决策者九特质1.能够接受不确定性:2.做事懂得轻重缓急:3.善于聆听:4.能够长远地看问题:5.能够看到大局,以大局为重:6.做事不优柔寡断,干脆利索.立即行动:7.善于独立思考:8.能充分调动团 ...

  4. goto 语句

    goto 语句 自从提倡结构化设计以来,goto 就成了有争议的语句. 首先,由于 goto 语句可以 灵活跳转,如果不加限制,它的确会破坏结构化设计风格.其次,goto 语句经常带来错 误或隐患. ...

  5. HEVC/H.265 的未来必须是使用并行处理(OpenCL?) OpenCV和OpenCL区别

    1 扩展库简介 OpenCV(Open Source Computer Vision Library)是一个致力于实时处理计算机视觉问题的开源库.它最初由Intel公司开发,以GPL许可协议发布,后来 ...

  6. Android ListView使用BaseAdapter与ListView的优化 (转至 http://www.open-open.com/lib/view/open1339485728006.html)

    在ListView的使用中,有时候还需要在里面加入按钮等控件,实现单独的操作.也就是说,这个ListView不再只是展示数据,也不仅仅是这一行要来处理用户的操作,而是里面的控件要获得用户的焦点.读者可 ...

  7. ini 文件操作记要(2): 使用 TMemIniFile

    unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Form ...

  8. Sprite与屏幕之间的关系

    锚点这东西挺怀念的,N年前我在做J2ME手游的时候.屏幕整体的坐标是左上角是00点.X轴向右递增,Y轴向下递增.所有的image也是这个原理.只是unity的触摸屏坐标不是左上角,而是左下角. 所以这 ...

  9. xampp更改网站存放目录

    改完后重启xampp 如何更改监听端口8080

  10. foreach使用

    1. 读取记录while($row=mysql_fetch_array($result)){$record[]=array(    'title'=>$row['title'], 'body'= ...