试图让 JQVMap 在 iphone 上正确缩放

Question

我在一个单页网站上设置了 JQVMap，并试图让我的地图在 iphone 上正确显示，但对于我的生活，我无法弄清楚出了什么问题。据说它是响应式的，并且会“开箱即用”地进行扩展，但我尝试了媒体查询并摆弄了我在示例页面上找到的一些调整大小的脚本，但运气不好。

我已经根据开发者页面 (http://jqvmap.com/) 上的说明设置了我的世界地图 div，并设置了内联的宽度和高度。

<div id="vmap" style="width: 600px; height: 400px;"></div>

查看开发人员的页面源，他没有设置内联宽度和高度，他希望使用一些脚本来根据他的页面容器设置宽度和高度。

 var map_width = (jQuery('#pages').width());

    if(map_width > 480)
    {
        map_width -= 40;
    }

    jQuery('.map').css({ 'width': map_width + 'px', 'height': (map_width*.75)+ 'px' });
    jQuery('#pages dd, #pages p, #pages div.inner').css({ 'width': map_width + 'px' });  

我在脚本方面是一个完全的新手，但很乐意尝试一些事情，并且我设法获得了 svg 地图以根据容器 div 更改它的宽度和高度，除了它仍然在 iphone 上被切断。

我也尝试使用 css，并在我的媒体查询中为地图的容器 div 设置最大宽度和最大高度 - 这不起作用，地图仍然大于容器并被切断。

我有这些用于响应的元标记：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /> 

我在这里缺少什么？根据文档，这似乎应该重新缩放“开箱即用”，当我重新缩放浏览器窗口时，我的地图似乎很高兴 - 为什么它不能在 iPhone 上缩放？任何帮助/方向/示例将不胜感激！

我也尝试将其添加到我的 .htaccess 文件中： addtype image/svg+xml .svg

我的 iphone 和 ipad 运行的是 IOS 8。

Answer 1

jqvmap 插件的“可扩展”方面是指它使用矢量图形。这并不意味着它会自动调整大小或响应开箱即用的视口尺寸变化。

为了在响应式 Twitter Bootstrap 布局中使用美国地图，其中地图宽度是高度的 1.4 倍，我做了以下操作：

1) 从#vmap 标记中移除内联的宽度和高度属性：

<div class="some-parent-element">
  <div id="vmap"></div>
</div>

2) 向您网站的 javascript 文件中添加一个函数，该函数采用父元素的宽度并将其分配给#vmap 宽度：

function sizeMap() {
    var containerWidth = $('.some-parent-element').width(),
        containerHeight = (containerWidth / 1.4);

    $('#vmap').css({
        'width': containerWidth,
        'height': containerHeight
    });
}

3) 在您的文档就绪函数中，调用您的 sizeMap 函数并再次调整大小：

sizeMap();
$(window).on("resize", sizeMap);

嵌入的地图现在适合 iPhone 视口，无论是纵向还是横向。此外，它现在可以响应所有视口大小。

Answer 2

我刚刚设置的样式如下：

 <div id="vmap" style="      
     min-width:600px;    
     min-height:600px;
     margin-left:10px;
     overflow:hidden;"></div>