官网栗子：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. 搭建Maven环境——使用本地的maven环境

    1.安装JDK. 2.Maven是 Apache 下的一个项目,官网下载 Maven:http://maven.apache.org/download.cgi 系统变量:M2_HOME= G:\vis ...

  2. HTML input只能输入数字

    onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.v ...

  3. c++ word类型

    word就是16位的数据 随着机器的发展,C++语言本身并没有规定short的位数,不一定是十六位的(随着计算机的发展,可能改变).但word将永远是16位的--机器发展后只需要修改,typedef ...

  4. v$Session详解

    从Oracle10gR1开始,Oracle在V$SESSION中增加关于等待事件的字段,实际上也就是把原来V$SESSION_WAIT视图中的所有字段全部整合到了V$SESSION视图中,开始的时候我 ...

  5. git分支合并的冲突解决方法

    本次学习的是解决不同分支提交的内容不同导致合并冲突,及怎样解决冲突.       基本命令: git log --graph查看分支合并图       具体步骤: 新建分支branch1,并修改rea ...

  6. RAC：Oracle11gR2：启动gsd服务

    /************/ 正在测试是否必须执行 gsdctl enable gsdctl start /************/ srvclt enable nodeapps -v srvctl ...

  7. Ubuntu：为 Firefox 浏览器 安装 flash 插件

    从adobe上下载浏览器flashplayer插件:推荐 x.tar.gz格式的——通用格式. 解压tar.gz后可以得到:libflashplayer.so 文件 将 libflashplayer. ...

  8. 使用python调用zxing库生成二维码图片

    (1)     安装Jpype 用python调用jar包须要安装jpype扩展,在Ubuntu上能够直接使用apt-get安装jpype扩展 $ sudo apt-get install pytho ...

  9. Java精选笔记_多线程(创建、生命周期及状态转换、调度、同步、通信)

    线程概述 在应用程序中,不同的程序块是可以同时运行的,这种多个程序块同时运行的现象被称作并发执行. 多线程可以使程序在同一时间内完成很多操作. 多线程就是指一个应用程序中有多条并发执行的线索,每条线索 ...

  10. sublime常用插件及配置

      以下是我的sublime插件列表: Side​Bar​Enhancements增强版侧边栏 这个插件官方不支持通过package安装了,只能手动了,下载地址https://github.com/S ...