<!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. 使用Delaunay三角剖分解决求多边形面积的问题

    朋友那边最近有个需求,需要框选一个选区,然后根据选区中的点求出面积.并且让我尝试用Delaunay来解决 似乎音译过来应该是德诺类 大致如下: 我在github上找了一个可以用的Delaunay库 h ...

  2. epoll, NIO,AIO

    Java 网络IO编程总结(BIO.NIO.AIO均含完整实例代码) Java中BIO,NIO和AIO使用样例 https://blog.insanecoder.top/javazhong-bio-n ...

  3. react-scripts的css modules

    用create-react-app创建的项目基于react-scripts内建支持css modules,需要把css文件名改成filename.module.css,导入方式需要改成: import ...

  4. angular学习笔记(三十)-指令(7)-compile和link(3)

    本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templa ...

  5. DIOCP开源项目-DIOCP3直接发送对象,帮你处理粘包问题

    该DEMO演示,如何在客户端与服务端之间直接传递TStream对象,让你专注于处理数据逻辑,可以忽略处理网络传输间粘包的问题. 上面由服务端向所有的客户端推送一个消息TMemoryStream对象(该 ...

  6. 【转】Unity3D的LightProbe动态光探头用法介绍

    原创至上,移步请戳:Unity3D的LightProbe动态光探头用法介绍 之前曾经介绍过Unity3D的LightMapping烘焙的用法.单独使用的LightMapping效果很好,但由于只是把光 ...

  7. Spark SQL利器：cacheTable/uncacheTable【转】

    转自:http://www.cnblogs.com/yurunmiao/p/4936583.html Spark相对于Hadoop MapReduce有一个很显著的特性就是“迭代计算”(作为一个Map ...

  8. http协议格式

    HTTP/1.0 报文类型有两种: 请求,响应. 请求类型 请求行(request-line):  请求类型+空格+url+\r\n. 请求头部(headers):0-n个键值对的集合. 空行(bla ...

  9. FFmpeg filter简介

    [时间:2016-08] [状态:Open] [关键词:FFmpeg, filter, filter graph,命令行] 1. 引言及示例 FFmpeg中的libavfilter提供了一整套的基于f ...

  10. django模型相关的知识点

    定义属性 概述: django根据属性的类型确定以下信息 当前选择的数据库支持字段的类型 渲染管理表单时使用的默认html控件 在管理站点最低限度的验证 django会为表增加自动增长的主键列,每个模 ...