百度地图Api进阶教程-默认控件和自定义控件2.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>10.1</title>
<script type="text/javascript">
function initialize() {
var map = new BMap.Map("container", { minZoom: 12, maxZoom: 25 });
map.centerAndZoom("成都", 13);
map.enableScrollWheelZoom(true);
//增加缩放控件
map.addControl(new BMap.NavigationControl());
//版权控件 显示在右下角
var cr = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT }); //var bs=map.getBounds();
cr.addCopyright({ id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀</a>" });
map.addControl(cr); //添加版权控件
//自定义控件
// 定义一个控件类,即function
// 定义一个控件类,即function
function ZoomControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
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.innerHTML = "<img src=\"http://t2.baidu.com/it/u=351117335,2626617599&fm=0&gp=0.jpg\" />"
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
//点击事件
div.onclick = function (e) {
map.setZoom(map.getZoom() + 2);
alert("1");
} // 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div; } // 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl); } function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div style="float: left; width: 100px;">
1</div>
<div id="container" style="width: 800px; height: 500px">
</div>
<div id="result">
</div>
</body>
</html>
百度地图Api进阶教程-默认控件和自定义控件2.html的更多相关文章
- 百度地图Api进阶教程-点击生成和拖动标注4.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-基础地图示例1.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 百度地图Api进阶教程-弹出信息窗口5.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-创建标注和自定义标注3.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图Api进阶教程-点聚合9.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- duilib进阶教程 -- Container控件的bug (14)
在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...
随机推荐
- webstorm 设置js或者html文件自动缩进为4个空格不生效
设置 tab 和自动缩进为4个空格不生效,解决办法如下 设置代码缩进 1. 依次打开files —- settings —- Editor —- Code Style —- JavaScript 2. ...
- ubuntu14.4.4安装smb服务实现文件共享
1.软件安装,ubuntu14需要安装的软件有3个 安装服务前养成习惯 sudo apt-get upgrade 首先切换到超级用户 su - root sudo apt-get install s ...
- unity, 在材质上指定render queue
材质球inspector面板在debug模式下可以看到Custom Render Queue一项: 其默认值为-1,表示使用相应shader的render queue设置. 也可以人为将其改为其它值, ...
- php分享二十九:命名空间
1:命名空间的命名不区分大小写 2:namespace必须在所有代码之前,除了declare语法以外(不过他之前可以有注释,空行等) 3:只有以下类型的代码受命名空间的影响,它们是:类(包括抽象类和t ...
- 【转】在 Windows 10 下,配置 Kinect v2 可用于 Windows Hello 验证身份
先要修改下注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\DriverFlighting\Partner如果没有这个文件夹就创建一个吧 然后创建一个字符串类型的变量T ...
- 如何使用 t-sql 更新数据库中日期字段的部分数据(年?月?日?时?分?秒?)
嗯,从网上找到了一些内容,综合利用了sql server的一些内置方法 首先是 convert 方法:https://msdn.microsoft.com/zh-cn/library/ms187928 ...
- js递归函数使用介绍
所谓的递归函数就是在函数体内调用本函数.使用递归函数一定要注意,处理不当就会进入死循环.递归函数只有在特定的情况下使用 ,比如阶乘问题 一个10以内的阶乘,js递归函数实例代码: <!DOCTY ...
- JVM Troubleshooting
案例分享:如何通过JVM crash 的日志和core dump定位和分析Instrument引起的JVM crash https://docs.oracle.com/javase/7/docs/we ...
- CMD命令下访问Oracle数据库
1.非集群下 Windows环境下数据库 127.0.0.1 只是个IP代表 实际要输入你要访问的数据库服务器IP地址的 如果数据库服务器不在本机上,需要加上数据库服务器的地址:用户名/密码@IP地 ...
- IP地址格式转换(htonl、ntohl;inet_addr、inet_ntoa)
名词解析: 主机字节序: 不同的CPU有不同的字节序类型,这些字节序是指整数在内存中保存的顺序,这个叫做主机序.最常见的有两种 1.Little endian:低字节存高地址,高字节存低地址 2.Bi ...