Question

我正在使用bing maps版本8 我想自定义缩放（进/出）按钮。

使用自定义图标
使用自定义位置（设置在左上角，而不是右侧）

我已经自定义了图钉图标（link）
但我不知道如何自定义缩放按钮。

Answer 1

要自定义缩放按钮，您必须隐藏默认按钮并分别创建自定义按钮。这是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map;

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'YourBingMapsKey',
            showZoomButtons: false  //Hide the default zoom buttons and create custom ones.
        });

        document.getElementById('zoomIn').onclick = function () {
            var z = map.getZoom() + 1;
            map.setView({ zoom: z });
        }

        document.getElementById('zoomOut').onclick = function () {
            var z = map.getZoom() - 1;
            map.setView({ zoom: z });
        }

        updateZoomButtons();
    }

    function updateZoomButtons() {
        switch (map.getMapTypeId()) {
            case Microsoft.Maps.MapTypeId.birdseye:
            case Microsoft.Maps.MapTypeId.aerial:
            case Microsoft.Maps.MapTypeId.canvasDark:
                document.getElementById('zoomOut').className = 'darkZoom';
                document.getElementById('zoomIn').className = 'darkZoom';
                break;
            default:
                document.getElementById('zoomOut').className = 'lightZoom';
                document.getElementById('zoomIn').className = 'lightZoom';
                break;
        }
    }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&branch=experimental' async defer></script>

    <style>
        .mapContainer, #myMap{
            position:relative;
            width:800px;
            height:600px;
        }

        #zoomOut, #zoomIn {
            text-align: center;
            font-size: 25px;
            position: absolute;
            right: 33px;
            font-weight: bold;
            width: 30px;
            height: 30px;
            border-radius: 16px;
            -moz-user-select: -moz-none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #zoomOut {
            line-height: 24px;
            top: 220px;
        }

        #zoomIn {
            top:160px;
            line-height:30px;
        }

        .darkZoom{
            background-color: #333333;
            border: 1px solid #fff;
            color:white;
        }

        .darkZoom:hover{
            background-color: #808080;
        }

        .lightZoom{
            background-color: white;
            border: 1px solid #000;
            color: black;
        }

         .lightZoom:hover{
            background-color: #CCCCCC;
        }
    </style>
</head>
<body>
    <div class="mapContainer">
        <div id="myMap"></div>
        <span id="zoomOut">‒</span>
        <span id="zoomIn">+</span>
    </div>
</body>
</html>

Bing地图版本8.自定义缩放按钮

1 个答案: