3

我在单页网站上设置了 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。

4

2 回答 2

5

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 视口。此外，它现在可以响应所有视口大小。

于 2015-06-16T18:21:28.380 回答
0

我刚刚设置了如下样式：

 <div id="vmap" style="      
     min-width:600px;    
     min-height:600px;
     margin-left:10px;
     overflow:hidden;"></div>
于 2015-07-23T00:56:42.450 回答