百度地图API示例之添加自定义控件
代码

<!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=sSelQoVi2L3KofLo1HOobonW"></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 = "red";
// 绑定事件,点击一次放大两级
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示例之添加自定义控件的更多相关文章
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之添加定位相关控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- 百度地图API示例之设置地图显示范围
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之移动地图
级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- 百度地图API示例之设置地图最大、最小级别
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之文本标注
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之小实践 添加代理商标注
地图坐标无非是经度纬度. 每个代理商都有他的经度纬度参数,就能够在地图上标注出来了. 效果如下: 功能包括 标记代理商 显示导航 显示距离 测量距离 点击选中等 其中测距用到的是自定义控件 地图根据城 ...
随机推荐
- 2.Could not open Selected VM debug port (8700). Make sure you do not have another instance of DDMS or of the eclipse plugin running
在eclipse.ini配置文件最后加上:-Djava.net.preferIPv4Stack=true 其他类似
- IDC机房网络测试要求
IDC机房网络质量要求: 我司项目目前覆盖目标机房是国内BGP机房.三线机房.电信机房.联通机房. 要求XXXX IDC机房到目标机房的网络质量,平均丢包≤0.5%,网络延迟≤50ms;高峰期平均丢包 ...
- [物理学与PDEs]第2章习题参考解答
[物理学与PDEs]第2章习题1 无旋时的 Euler 方程 [物理学与PDEs]第2章习题2 质量力有势时的能量方程 [物理学与PDEs]第2章习题3 Laplace 方程的 Neumann 问题 ...
- [物理学与PDEs]书中出现的向量公式汇总
P 11 1. $\rot (\phi{\bf A})=\n \phi\times{\bf A}+\phi\ \rot{\bf A}$. 2. $-\lap {\bf A}=\rot\rot {\bf ...
- Home键状态保存运用场景
当我们在一个Activity中有接收Intent过来的值,或者当前Activity有保存数据时候,如果此时不小心按到了Home键,然后没有及时回来而是运行了其它应用程序,当你想起来的时候,恐怕已经是几 ...
- 在eclipse中下载包含子模块(Submodules)的git项目
先将项目下载下来 , 这时由于是子项目的原因 , 下载的项目中不包含任何子项目 . 这时在eclipse的Git Repositories中 , 选中Submodules , 右键点击update即可 ...
- http请求中java中的302和sendRedirect的区别
============================================================================================ getCont ...
- ruby字符串学习笔记4
1 单独处理字符串的字符 如果处理的是ASCII码的文档使用string#each_byte 注意 没有 string#each方法,String#each_byte 速度比 String#scan快 ...
- 20145305 《Java程序设计》实验四
Android开发基础 安装过程没有截图 给出安装参考链接 http://ask.android-studio.org/?/article/9 实验结果截图: 完成HelloWorld项目,显示自己的 ...
- windows timeGetTime() 函数 获取系统从开机到现在的毫秒时间值
#include <windows.h> #include <iostream> #pragma comment( lib,"winmm.lib" ) in ...