새로 고침 Google지도 컨트롤

Question

내 Google지도에서 확대/축소 수준을 보여주는 컨트롤을 추가했습니다. 그러나 그것은 가치를 업데이 트하지 않습니다. map.getZoom() 함수를 사용하고 있습니다.

var divRef = document.createElement('div'); 
var ref = document.createElement("div"); 
ref.setAttribute("id", "ref"); 
divRef.appendChild(ref); 

var controlText1 = document.createElement('div'); 
controlText1.className = "zoom"; 
var label1 = document.createElement('LABEL'); 

var t = document.createTextNode("zoom level "); 
label1.setAttribute = ("for", "zoom"); 
label1.appendChild(t); 
controlText1.appendChild(label1); 
ref.appendChild(controlText1); 
var tzoom = document.createTextNode(map.getZoom()); 
controlText1.appendChild(tzoom); 
ref.appendChild(controlText1); 

map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(divRef); 

처음으로지도를로드 할 때 줌 레벨 컨트롤이 올바르게 표시되지만 버튼을 사용하여 스크롤 변경을 스크롤하면 값이 업데이트되지 않습니다. 컨트롤을 새로 고침하려면 어떻게해야합니까? 아니면이 컨트롤을 다른 방식으로 설정해야합니까?

왼쪽 하단 모서리에 컨트롤이있는 피들입니다. 확대 할 때 값이 업데이트되지 않습니다.

https://jsfiddle.net/3b31qfsm/

Answer 1

컨트롤의 콘텐츠를 업데이트 할 'ZOOM_CHANGED'이벤트 리스너를 사용

google.maps.event.addListener(map, 'zoom_changed', function() { 
    tzoom.textContent = map.getZoom(); 
}); 

proof of concept fiddle

코드 :

var map; 
 
var chicago = { 
 
    lat: 41.85, 
 
    lng: -87.65 
 
}; 
 

 
function CenterControl(controlDiv, map) { 
 
    var divRef = document.createElement('div'); 
 
    var ref = document.createElement("div"); 
 
    ref.setAttribute("id", "ref"); 
 
    divRef.appendChild(ref); 
 

 
    var controlText1 = document.createElement('div'); 
 
    controlText1.className = "zoom"; 
 
    var label1 = document.createElement('LABEL'); 
 
    controlText1.style.color = 'red'; 
 
    controlText1.style.fontFamily = 'Roboto,Arial,sans-serif'; 
 
    controlText1.style.fontSize = '16px'; 
 
    controlText1.style.lineHeight = '38px'; 
 
    controlText1.style.paddingLeft = '5px'; 
 
    controlText1.style.paddingRight = '5px'; 
 
    controlText1.style.backgroundColor = '#fff'; 
 
    controlText1.style.border = '2px solid #fff'; 
 
    controlText1.style.borderRadius = '3px'; 
 
    controlText1.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; 
 

 
    var t = document.createTextNode("zoom level "); 
 
    label1.setAttribute = ("for", "zoom"); 
 
    label1.appendChild(t); 
 
    controlText1.appendChild(label1); 
 
    ref.appendChild(controlText1); 
 
    var tzoom = document.createTextNode(map.getZoom()); 
 
    controlText1.appendChild(tzoom); 
 

 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
 
    tzoom.textContent = map.getZoom(); 
 
    }) 
 

 
    ref.appendChild(controlText1); 
 
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(divRef); 
 

 
    var controlUI = document.createElement('div'); 
 
    controlUI.style.backgroundColor = '#fff'; 
 
    controlUI.style.border = '2px solid #fff'; 
 
    controlUI.style.borderRadius = '3px'; 
 
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; 
 
    controlUI.style.cursor = 'pointer'; 
 
    controlUI.style.marginBottom = '22px'; 
 
    controlUI.style.textAlign = 'center'; 
 
    controlUI.title = 'Click to recenter the map'; 
 
    controlDiv.appendChild(controlUI); // Set CSS for the control interior. 
 

 
    var controlText = document.createElement('div'); 
 
    controlText.style.color = 'rgb(25,25,25)'; 
 
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif'; 
 
    controlText.style.fontSize = '16px'; 
 
    controlText.style.lineHeight = '38px'; 
 
    controlText.style.paddingLeft = '5px'; 
 
    controlText.style.paddingRight = '5px'; 
 
    controlText.innerHTML = 'Center Map'; 
 
    controlUI.appendChild(controlText); // Setup the click event listeners: simply set the map to Chicago. 
 
    controlUI.addEventListener('click', function() { 
 
    map.setCenter(chicago); 
 
    }); 
 
} 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: chicago 
 
    }); 
 

 
    var centerControlDiv = document.createElement('div'); 
 
    var centerControl = new CenterControl(centerControlDiv, map); 
 
    centerControlDiv.index = 1; 
 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>

을