React框架下如何为IFrame嵌入的谷歌地图应用greedy手势处理

Hey there! I've got you covered on this map gesture configuration. The key here is adding the gestureHandling parameter directly to your Google Maps Embed URL—this is exactly where you control how the map responds to touch/mouse interactions.

Which Mode to Choose? #

For your specific needs:

• Use gestureHandling=cooperative: This lets mobile users drag the map with a single finger, while desktop users need to hold down Ctrl/Command to drag the map (allowing normal page scrolling when not holding the modifier key). Perfect for your requirement of keeping desktop page scroll intact while enabling easy mobile interactions.
• gestureHandling=greedy would let users drag the map with a single finger on both mobile and desktop, which would block normal page scrolling on desktop—so that's not what you want here.

Modified Code Implementation #

Here's how to update your existing code to include this parameter:

const MY_API = configData.googleMapKey;
// Add gestureHandling=cooperative to the URL parameters
let _url = `https://www.google.com/maps/embed/v1/directions?key=${MY_API}&origin=${queryPickup}&destination=${queryDrop}&gestureHandling=cooperative`;

return(
  <div>
    <iframe 
      frameBorder="0" 
      width="100%" 
      height="350" 
      style={{ border: 0 }} 
      src={_url}
    ></iframe>
  </div>
);

Quick Explanation #

• We simply append &gestureHandling=cooperative to the end of the embed URL (using & to separate it from the existing parameters).
• This tells the Google Maps Embed API to use the cooperative gesture mode, which aligns perfectly with your mobile/desktop interaction requirements.

Just drop this updated code in place, and you should see the desired behavior right away!

内容的提问来源于stack exchange，提问作者Aniket Yadav