<!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的更多相关文章

  1. 百度地图Api进阶教程-点击生成和拖动标注4.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图Api进阶教程-实例高级操作8.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 百度地图Api进阶教程-基础地图示例1.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  5. 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  7. 百度地图Api进阶教程-创建标注和自定义标注3.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  8. 百度地图Api进阶教程-点聚合9.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. duilib进阶教程 -- Container控件的bug (14)

    在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...

随机推荐

  1. 获取最新chromedriver.exe的方法，并查阅最新的chromedriver.exe支持到什么chrome版本

    1.打开https://chromedriver.storage.googleapis.com/index.html  (需要FQ),这个页面提供 所有 chromedirver版本下载, 版本排列 ...

  2. chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题

    个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...

  3. 找不到dubbo:annotaion错误

    dubbo 2.8.4 出现找不到dubbo:annotation的错误,其实这个不会影响程序正确的运行,但是看到有红叉心里肯定非常不爽: 解决办法是,将dubbo-2.8.4.jar包,后缀改成.z ...

  4. 在linux中配置环境变量

    JDK下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 根据Linux ...

  5. jQuery学习笔记（jquery.simplemodal插件）

    官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...

  6. React Native超棒的LayoutAnimation(布局动画)

          该文翻译自:https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.6 ...

  7. 论Java的ArrayList.add(e)和C++的vector.push_back(e)的区别

    Java的ArrayList和C++的vector很类似,都是很基本的线性数据结构.但是他们的表现却不同. 在工作中碰到一个问题就是,搞不清楚到底传进去的是一个新对象,还是当前对象的引用! 经过实战分 ...

  8. PostgreSQL PL/Python 和 PL/Postgres 函数互相调用

    create or replace function hello(name text) returns text as $$ # str = name+',你吃饭了吗?'; # return 'hel ...

  9. 深入理解Linux内核－进程调度

    1.什么时候进行进程切换 调度策略目标:1.进程响应尽量快:2.后台作业吞吐量尽量高:3.尽可能避免进程饥饿:4.低优先级和高优先级进程需要尽量调和. 调度策略:决定什么时候选择什么进程运行的规则.基 ...

  10. 高级数据库及一步一步搭建versant数据库

    总的来说,高级数据库课程分为分布式数据库和面向对象数据库两块.分布式数据库介绍了分布式数据库的方方面面,包括数据库系统的设计.查询处理优化.事务管理和恢复.并发控制.可靠性.安全性与目录管理等.面向对 ...