百度地圖自定義放大縮小按鈕

時間 2019-11-12

標籤百度地圖自定義放大縮小按鈕简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。