How to listen for user generated zoom in Google Maps?

前端 未结 5 2099
借酒劲吻你
借酒劲吻你 2021-02-04 06:24

I want to know when a Google Maps zoom_changed event is fired specifically by a user interaction with the +/- zoom buttons. If I use a general event listener for zoom_changed,

相关标签:
5条回答
  • 2021-02-04 06:42

    I solved this issue by creating Custom Zoom buttons for my Map.

    Here is the code from my project:
    Edit: Removed unnecessary and self explanatory common code

    your zoomControl function:

    function zoomControl(map, div) {
    
      var controlDiv = div,
          control = this;
    
      // Set styles to your own pa DIV
      controlDiv.style.padding = '5px';
    
      // Set CSS for the zoom in div.
      var zoomIncrease = document.createElement('div');
      zoomIncrease.title = 'Click to zoom in';
      // etc.
    
      // Set CSS for the zoom in interior.
      var zoomIncreaseText = document.createElement('div');
      // Use custom image
      zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>';
      zoomIncrease.appendChild(zoomIncreaseText);
    
      // Set CSS for the zoom out div, in asimilar way
      var zoomDecreaseText = document.createElement('div');
      // .. Code .. Similar to above
    
      // Set CSS for the zoom out interior.
      // .. Code ..
    
      // Setup the click event listener for Zoom Increase:
      google.maps.event.addDomListener(zoomIncrease, 'click', function() {
          zoom = MainMap.getZoom();
          MainMap.setZoom(zoom+1);
          // Other Code parts
      });
    
      // Setup the click event listener for Zoom decrease:
      google.maps.event.addDomListener(zoomDecrease, 'click', function() {
          zoom = MainMap.getZoom();
          MainMap.setZoom(zoom-1);
      });
    }
    

    your initialize function:

    function initializeMap() {
    
        var latlng = new google.maps.LatLng(38.6, -98);
        var options = {
            zoom : 5,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP,  
            // Other Options
        };
        MainMap = new google.maps.Map(document.getElementById("google-map-canvas"),
                options);
    
        // The main part - Create your own Custom Zoom Buttons
        // Create the DIV to hold the control and call the zoomControl()
        var zoomControlDiv = document.createElement('div'), 
            zoomLevelControl = new zoomControl(MainMap, zoomControlDiv);
    
        zoomControlDiv.index = 1;
        MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv);
    }
    

    Hope it helps

    0 讨论(0)
  • 2021-02-04 06:49
    var zoomFlag = "user"; // always assume it's user unless otherwise
    
    // some method changing the zoom through API
    zoomFlag = "api";
    map.setZoom(map.getZoom() - 1);
    zoomFlag = "user";
    
    // google maps event handler
    zoom_changed: function() {
      if (zoomFlag === "user") {
        // user zoom
      }
    }
    
    0 讨论(0)
  • 2021-02-04 06:55

    I wouldn't just hook in to the +/- buttons (or buttons on your own custom control for that matter). The user can change the zoom on the map with the mouse wheel, or by double-clicking on the map. Plus, you'd be relying on implementation detail rather than documented API, which is a major no-no.

    This really means the only reliable, documented way to detect a change in zoom is to listen to the zoom_changed event of the Map.

    If your event handler can't determine whether the event came from user action or an API call, there's two approaches:

    • Set a flag before calling an API function so that you know you can ignore this change.
    • Can you re-architect your app such that it does not matter whether a zoom change came from code or the user?
    0 讨论(0)
  • 2021-02-04 06:56

    I would suggest using a custom control for zoom in/out and then using event listeners on the custom congrol:

    http://goo.gl/u8gKC

    You can easily hide the default zoom control:

    http://goo.gl/N5HIE

    (zoomControl to be specific)

    0 讨论(0)
  • 2021-02-04 07:01

    I was looking to do the same thing. I was hoping to find that there was a way built into the Google Maps API, but at a minimum, you should be able to store the starting zoom level as a variable when you initialize the map. Then, compare the result of getZoom() to it to know whether it was a zoom in or a zoom out.

    For example:

    map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 });
    var previous_zoom = 11;
    
    google.maps.event.addListener(map,'zoom_changed',function(){
      if(map.getZoom() > previous_zoom) {
        alert('You just zoomed in.');
      }
      previous_zoom = map.getZoom();
    }
    
    0 讨论(0)
提交回复
热议问题