Javascript Bing地图第8版。自定义缩放按钮_Javascript_Bing Maps

Javascript Bing地图第8版。自定义缩放按钮

javascript

Javascript Bing地图第8版。自定义缩放按钮,javascript,bing-maps,Javascript,Bing Maps,我正在使用bing地图第8版。我想自定义缩放（放大/缩小）按钮使用自定义图标使用自定义位置（设置在左上角，而不是右上角）我已经自定义了图钉图标（）但是我不知道如何自定义缩放按钮。要自定义缩放按钮，您必须隐藏默认按钮并单独创建自定义按钮。以下是一个例子： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" />

我正在使用bing地图第8版。
我想自定义缩放（放大/缩小）按钮

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

我已经自定义了图钉图标（）

但是我不知道如何自定义缩放按钮。

要自定义缩放按钮，您必须隐藏默认按钮并单独创建自定义按钮。以下是一个例子：

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


var映射；
函数GetMap（）
{
map=new Microsoft.Maps.map（“#myMap”{
凭证：“YourBingMapsKey”，
showZoomButtons:false//隐藏默认缩放按钮并创建自定义按钮。
});
document.getElementById（'zoomIn'）。onclick=function（）{
var z=map.getZoom（）+1；
setView（{zoom:z}）；
}
document.getElementById（'zoomOut'）。onclick=function（）{
var z=map.getZoom（）-1；
setView（{zoom:z}）；
}
updateZoomButtons（）；
}
函数updateZoomButtons（）{
开关（map.getMapTypeId（））{
案例Microsoft.Maps.MapTypeId.birdseye：
案例Microsoft.Maps.MapTypeId.Aeror：
案例Microsoft.Maps.MapTypeId.canvasDark：
document.getElementById（'zoomOut'）。className='darkZoom'；
document.getElementById（'zoomIn'）。className='darkZoom'；
打破
违约：
document.getElementById（'zoomOut'）。className='lightZoom'；
document.getElementById（'zoomIn'）。className='lightZoom'；
打破
}
}
.mapContainer，#myMap{
位置：相对位置；
宽度：800px；
高度：600px；
}
#zoomOut，#zoomIn{
文本对齐：居中；
字体大小：25px；
位置：绝对位置；
右：33px；
字体大小：粗体；
宽度：30px；
高度：30px；
边界半径：16px；
-moz用户选择：-moz无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#zoomOut{
线高：24px；
顶部：220px；
}
#缩放{
顶部：160px；
线高：30px；
}
darkZoom先生{
背景色：#333333；
边框：1px实心#fff；
颜色：白色；
}
.darkZoom:悬停{
背景色：#808080；
}
.lightZoom{
背景色：白色；
边框：1px实心#000；
颜色：黑色；
}
.lightZoom:悬停{
背景色：#中交；
}
‒
+

要自定义缩放按钮，必须隐藏默认按钮并单独创建自定义按钮。以下是一个例子：

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


var映射；
函数GetMap（）
{
map=new Microsoft.Maps.map（“#myMap”{
凭证：“YourBingMapsKey”，
showZoomButtons:false//隐藏默认缩放按钮并创建自定义按钮。
});
document.getElementById（'zoomIn'）。onclick=function（）{
var z=map.getZoom（）+1；
setView（{zoom:z}）；
}
document.getElementById（'zoomOut'）。onclick=function（）{
var z=map.getZoom（）-1；
setView（{zoom:z}）；
}
updateZoomButtons（）；
}
函数updateZoomButtons（）{
开关（map.getMapTypeId（））{
案例Microsoft.Maps.MapTypeId.birdseye：
案例Microsoft.Maps.MapTypeId.Aeror：
案例Microsoft.Maps.MapTypeId.canvasDark：
document.getElementById（'zoomOut'）。className='darkZoom'；
document.getElementById（'zoomIn'）。className='darkZoom'；
打破
违约：
document.getElementById（'zoomOut'）。className='lightZoom'；
document.getElementById（'zoomIn'）。className='lightZoom'；
打破
}
}
.mapContainer，#myMap{
位置：相对位置；
宽度：800px；
高度：600px；
}
#zoomOut，#zoomIn{
文本对齐：居中；
字体大小：25px；
位置：绝对位置；
右：33px；
字体大小：粗体；
宽度：30px；
高度：30px；
边界半径：16px；
-moz用户选择：-moz无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#zoomOut{
线高：24px；
顶部：220px；
}
#缩放{
顶部：160px；
线高：30px；
}
darkZoom先生{
背景色：#333333；
边框：1px实心#fff；
颜色：白色；
}
.darkZoom:悬停{
背景色：#808080；
}
.lightZoom{
背景色：白色；
边框：1px实心#000；
颜色：黑色；
}
.lightZoom:悬停{
背景色：#中交；
}
‒
+

谢谢您的回答。zoomIn和zoomOut工作正常。但是，当我使用自定义缩放（放大/缩小）时，没有动画。从zoom=x到zoom=x+1（或x-1）的变化非常突然。你知道怎么解决这个问题吗？谢谢，谢谢你的回答。zoomIn和zoomOut工作正常。但是，当我使用自定义缩放（放大/缩小）时，没有动画。从zoom=x到zoom=x+1（或x-1）的变化非常突然。你知道怎么解决这个问题吗？谢谢