如何使用放大弹出窗口在移动设备中显示地图？

Posted 2023-05-07

【中文标题】如何使用放大弹出窗口在移动设备中显示地图？

【英文标题】：how to display map in mobile devices using magnific popup?

【发布时间】：2014-02-07 15:47:09

【问题描述】：

我有 magnific popup 插件可以在弹出窗口上显示地图，但它在移动设备中无法正常工作。 如果我点击它会重定向到谷歌地图页面

这是我的代码

$('.video, .map-link').magnificPopup(
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
);

【问题讨论】：

请提供 .video .map-link div 代码...

【参考方案1】：

试试这个，

 $('.video, .map-link').magnificPopup(
     type: 'iframe',
     mainClass: 'mfp-fade',
     removalDelay: 160,
     preloader: false,
     fixedContentPos: false,
     iframe: 
         markup: '<div class="mfp-iframe-scaler">'+
                 '<div class="mfp-close"></div>'+
                 '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                 '</div>', 
         patterns: 
             gmaps: 
                 index: '//maps.google.',
                 src: '%id%&output=embed'
             
         ,
         srcAction: 'iframe_src', 
     
 );

【参考方案2】：

colares 的解决方案对我有用。我还添加了一个媒体查询，因为移动设备上的弹出窗口是一个窄矩形，这使它更宽：

@media screen and (max-width: 875px) .mfp-container   
height: 90%;
width: 175%;  
left: -37%;