• 百度地图自定义放大缩小按钮


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>百度地图Demo02</title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=9f3caf0f96e461b6e78d6d5bf6c7a425"></script>
        <style type="text/css">  
            html{height:100%}  
            body{height:100%;margin:0px;padding:0px}  
            #BaiduMap{ height:600px; width:400px;} 
        </style> 
    </head>
    <body>
        <div>
            <h2>百度地图</h2>
        </div>
        <div id="BaiduMap">
        </div>
        <script type="text/javascript">
            var map = new BMap.Map("BaiduMap");          // 创建地图实例
            var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
            map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
    
            // 定义一个控件类,即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) {
                //创建一个DIV
                var mydiv = document.createElement("div");
                //创建一个放大用的img
                var img_plus = document.createElement("img");
                //设置img的src属性
                img_plus.setAttribute("src", "./images/plus_2.png");
                //为img设置点击事件
                img_plus.onclick = function () {
                    map.zoomTo(map.getZoom() + 1);
                }
                //创建一个缩小用的img
                var img_minus = document.createElement("img");
                img_minus.setAttribute("src", "./images/minus_2.png");
                img_minus.onclick = function () {
                    map.zoomTo(map.getZoom() - 1);
                }
                //添加放大的img图标到div中
                mydiv.appendChild(img_plus);
                //加一个换行符,使2个图标上下排列
                mydiv.appendChild(document.createElement("br"));
                //添加缩小的img图标到div中
                mydiv.appendChild(img_minus);
                //添加DOM元素到地图中
                map.getContainer().appendChild(mydiv);
                //将DOM元素返回;
                return mydiv;
            }
    
            // 创建控件实例    
            var myZoomCtrl = new ZoomControl();
            // 添加到地图当中    
            map.addControl(myZoomCtrl);  
        </script>
    </body>
    </html>
  • 相关阅读:
    【转载】常见的Web攻击手段之XSS攻击讲解及实战
    【转载】常见的Web攻击手段之CSRF攻击
    【转载】Ognl表达式基本原理和使用方法(最全最详细附带源码解读)
    linux(centos7)安装jdk8--附带oracle账号
    Vagrant+Secure CRT的使用
    Idea 如何解决项目依赖冲突
    全局唯一iD的生成 雪花算法详解及其他用法
    【转载】什么是java OOM?如何分析及解决oom问题?
    FastJSON的0day漏洞报告
    MySQL/Oracle 添加/查看表注释和字段注释
  • 原文地址:https://www.cnblogs.com/taobox/p/3246529.html
Copyright © 2020-2023  润新知