Question

我正在尝试使用嵌入式图片版本替换我在索引页面上的gmap。地图在桌面上看起来还不错，但是当我在移动设备上查看它时，由于gmap，它太长并且滚动到页面末尾很有挑战性。我在JS上设置了“scrollwheel：false”，它修复了这个桌面，但在移动设备上仍然无法正常工作。我还将地图宽度设置为90％，但地图在移动设备上看起来仍然很大。因此，一旦屏幕尺寸低于767px，我决定用嵌入式图像版本替换地图。唯一的问题是，我不确定如何交换两个（gmap到图像）。任何建议将不胜感激。

有关页面的一些细节，正在使用RoR的“渲染”显示。

index.html：

<div id="map" class="google-maps">
     <%= render "gmap" %>
</div>

_gmap.html：

<script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({
       provider: {
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.HYBRID,
          maxZoom: 64
       },
       internal: {
          id: 'map'
       }
    }, function() {
       markers = handler.addMarkers(<%=raw@hash.to_json%>);
       handler.bounds.extendWith(markers);
       handler.fitMapToBounds()
    });
    handler
</script>

gmap.css

.google-maps {  
    width: 90%; 
    height: 100%; 
    margin: 0 auto;
    position: absolute;
    top:0;
    z-index:1;
}

Answer 1

这是基础......

我建议向上移动，而不是向下移动。或 - 只是分开它......

如果你拉入地图......但是用图像替换它......它有点落后了。：）

（更新此链接...） http://codepen.io/sheriffderek/pen/lLwgk/

$(function() {

  var wWidth = $(window).width();

  if (wWidth > 1200) {

    $('#yo').append('<img alt="big image" src="http://placehold.it/1200x800" />')
    // you can put any code in here... : )

  } else {

    $('#yo').append('<img alt="big image" src="http://placehold.it/600x400" />')

  }

});

http://codepen.io/sheriffderek/pen/azOyQV

这显示了如何使用数据属性的东西 - 也许不适合这一点 - 但这会注意变化。

css媒体查询将地图替换为嵌入图片

1 个答案: