我使用的是 bing map 版本 8。
我想自定义缩放(放大/缩小)按钮。
- 使用自定义图标
- 使用自定义位置(设置在左上角，而不是右侧)
我已经自定义了图钉图标 ( link )
但我不知道如何自定义缩放按钮。
最佳答案
要自定义缩放按钮，您必须隐藏默认按钮并单独创建自定义按钮。这是一个例子:
<!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>
关于javascript - Bing map 版本 8。自定义缩放按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45240348/