Получение текущего уровня масштабирования с карты Google

Question

Я использую карту google в приложении PHP/MYSQL. Я получаю код для формы карты Goolge Docs и немного адаптирован для приложения. Новые изменения поступают в приложение, и теперь приложение должно знать «текущий уровень масштабирования карты google». Я проверяю в интернете, но я не нашел ясного ответа. Можно ли это сделать? Обязательно ли перезагружать страницу при каждом изменении масштаба? Это код и спасибо.

<code> 

    function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(latitude,longitude), 
    zoom: zoommapa, 
    zoomControl: true, 
    zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE 
}, 
    mapTypeId: 'roadmap' 

    }); 
    // drap center 
    var image = 'images/icons/etapa/etapa.png'; 
    var myLatLng = new google.maps.LatLng(latitude,longitude); 
    var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image 
    }); 

    var infoWindow = new google.maps.InfoWindow; 


    // Change this depending on the name of your PHP file 
    downloadUrl("marquers_motor_3.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    //var name = 1; 
    var markers2 = []; 
    for (var i = 0; i < markers.length; i++) { 
     //var name = markers[i].getAttribute("name"); 
     var image = markers[i].getAttribute("image"); 
     var sombra = markers[i].getAttribute("sombra"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var orden = markers[i].getAttribute("order"); 
     var name = markers[i].getAttribute("name"); // web_site email ciudad pais 
     var web_site = markers[i].getAttribute("web_site"); 
     var email = markers[i].getAttribute("email"); 
     var ciudad = markers[i].getAttribute("ciudad"); 
     var pais = markers[i].getAttribute("pais"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
      if (ciudad =="" || ciudad =='Desconocido') { ciudad = ""} else {ciudad =ciudad + " " } 
      if (!(web_site =="")) {web_site = "<a href='" + web_site + "' class='list' target='_blank'>" + web_site +"</a>"+"<br>"} else {web_site =""} 
     var html = "<div id='infoWindow'>" + orden + " - " + name + "<br>" + web_site + ciudad + " " + pais + "</div>"; 
     //var name = name + 1; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: image, 
     shadow: sombra 
     }); 
     var marker2 = new google.maps.Marker({ 
     position: point 
     }); 
     markers2.push(marker); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
    var mcOptions = {gridSize: 50, maxZoom: 15}; 
var MarkerClusterer = new MarkerClusterer(map, markers2,mcOptions); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 

    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

//]]> 
//google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Я предполагаю, что приложение должно знать уровень масштабирования, но уровень масштабирования в пользовательском пространстве (на стороне клиента).

1. получить уровень масштабирования на карте с помощью JavaScript (см https://developers.google.com/maps/documentation/javascript/reference?hl=nl#Map)

   map.getZoom();

2. Это необходимо отправить обратно на сервер с помощью AJAX звонки

3. Сервер может сделать с уровнем масштабирования, что он хочет

Имейте в виду тот факт, что если несколько пользователей могут открыть одна и та же карта, уровни масштабирования могут быть разными, так что будет требуемым поведением?

Answer 2

Да, вы можете получить текущий уровень масштабирования карты с помощью метода getZoom объекта google.maps.Map.

Если вам нужно вызвать метод при изменении масштаба, вы можете прослушивать событие zoom_changed объекта google.maps.Map. Для получения дополнительной информации о google.maps.Map объекта следующим образом: this

Рассмотрим следующий пример (чтобы сделать его работу: копию в Блокноте сохранить файл как HTML и запустить его с Chrome):

<!DOCTYPE html> 
<html> 
<head>  
    <title>Getting Zoom Demo</title> 
    <style type="text/css"> 
     html, body{ height: 100%; height: 100%; margin: 0; padding: 0; } 
     #map-container{ height: 100%; width: 100%; min-width:500px; min-height:300px; } 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  
</head> 
<body> 
    <div> 
     <label id="display-zoom-label"> 

     </label> 
    </div> 
    <div id="map-container"></div> 
    <script> 
     // Global map variable to have access to map object everywhere in the code 
     var map, 
      firstBoundChangedListener, 
      markers = []; 

     // Add random markers 
     function addMarkers(count) { 
      // map is the google.maps.Map object 
      var bounds = map.getBounds(); 
      var northEast = bounds.getNorthEast(); 
      var southWest = bounds.getSouthWest(); 
      var minLat = Math.min(northEast.lat(), southWest.lat()); 
      var maxLat = Math.max(northEast.lat(), southWest.lat()); 
      var minLng = Math.min(northEast.lng(), southWest.lng()); 
      var maxLng = Math.max(northEast.lng(), southWest.lng()); 

      var latDifference = maxLat - minLat; 
      var lngDifference = maxLng - minLng; 
      var latLngArray = new Array(); 

      for (var i = 0; i < count; i++) { 
       var lat = minLat + Math.random() * latDifference; 
       var lng = minLng + Math.random() * lngDifference; 
       var latLng = new google.maps.LatLng(lat, lng); 
       latLngArray.push(latLng); 
      } 

      for (var i = 0; i < latLngArray.length; i++) { 
       var marker = new google.maps.Marker({ 
        position: latLngArray[i], 
        title: "Marker: " + i 
       }); 
       markers.push(marker); 
       marker.setMap(map); 
      } 
     } 
     function UpdateZoomLabel() { 
      var displayZoomLabel = document.getElementById("display-zoom-label"), 
       // get current zoom 
       zoomValue = map.getZoom(); 
      displayZoomLabel.innerHTML = "The Current Map's Zoom is: " + zoomValue; 
     } 
     // Initialize the map object 
     function initialize() { 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var mapOptions = { 
       zoom: 8, 
       center: latlng 
      }; 
      map = new google.maps.Map(document.getElementById('map-container'), mapOptions); 
      firstBoundChangedListener = google.maps.event.addListener(map, "bounds_changed", function() { 
       if (firstBoundChangedListener) google.maps.event.removeListener(firstBoundChangedListener); 
       // call add markers: add 'n' markers randomly 
       addMarkers(6); 
      }); 
      //Listen for the 'zoom_changed' event of the map 
      google.maps.event.addListener(map, "zoom_changed", function() { 
       //show zoom in label 
       UpdateZoomLabel(); 
      }); 
      UpdateZoomLabel(); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</body> 
</html>