求助：AngularJS指令中Google Maps移动端gestureHandling失效

Hey there! Let’s get that unresponsive mobile map sorted out for you. I’ve run into this exact issue with AngularJS + Google Maps integrations before, so adding the gestureHandling: 'cooperative' setting is definitely the right move—here’s exactly how to implement it in your directive:

Step 1: Locate your map initialization code in the directive #

First, find the part of your directive where you create the Google Maps instance. This is almost always in the link function, where you define mapOptions and initialize the Map object.

Step 2: Add the gestureHandling property to mapOptions #

Update your mapOptions object to include the gestureHandling key set to 'cooperative'. Here’s a full example of what your directive might look like after the change:

angular.module('yourAppName').directive('googleMap', function() {
  return {
    restrict: 'E',
    scope: {
      // Your existing scope bindings (if any)
    },
    link: function(scope, element, attrs) {
      // Initialize map options with gesture handling
      const mapOptions = {
        center: new google.maps.LatLng(scope.lat, scope.lng), // Your existing center
        zoom: 12, // Your existing zoom level
        gestureHandling: 'cooperative' // Add this line right here!
        // Any other existing map options (styles, controls, etc.)
      };

      // Create the map instance
      const map = new google.maps.Map(element[0], mapOptions);

      // Rest of your code: autocomplete setup, marker rendering, etc.
      // ...
    }
  };
});

What does this do? #

The 'cooperative' gesture handling mode tells Google Maps to share touch gestures with the rest of your page. On mobile, this means users can scroll the page normally, and only interact with the map (drag, zoom) when they start their touch gesture directly on the map area—no more map hijacking all touch inputs!

If you need dynamic configuration #

If you ever want to toggle this setting based on a scope variable, you can bind it like this:

gestureHandling: scope.mapGestureMode || 'cooperative'

Then just set $scope.mapGestureMode in your controller if you need to switch modes later.

Test it out! #

Save your changes, fire up Chrome/Safari on a mobile device (or use your browser’s dev tools mobile emulator), and you should be able to drag, zoom, and interact with the map while still scrolling the rest of your page smoothly.

内容的提问来源于stack exchange，提问作者Reena Verma