如何在 Div 中顯示 Google 地圖縮放級別

Question

如何在 Div 中像標簽一樣顯示谷歌地圖縮放級別。

像圖像中的東西

這是我的代碼：

 function myMap() { var myCenter = new google.maps.LatLng(56.1304, -106.3468); var mapProp = { center: myCenter, zoom: 6, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); marker.setMap(map); }

 <div style="padding: 0px; padding-top:2px; padding-right:2px; width:25px; height: 25px; background-color: #fff; font-size:18px; border: solid 1px #777; text-align:center; vertical-align:middle; font-weight:bold;"> display zoom level here </div>

Answer 1

您可以使用Google Maps Javascript API 文檔頁面（事件）中描述的代碼。 向地圖添加縮放更改偵聽器，並將 div 內容設置為每次更改時的新縮放。

<div id="zoom"></div>

map.addListener('zoom_changed', function() {
    var currentZoom = map.getZoom();
    console.log('Zoom: ' + currentZoom);
    //You can now set the value to the div content
    document.getElementById("zoom").innerHTML = currentZoom;
});