Question

我无法更改https://codepen.io/sinanelms/pen/MqdNNY处代码的大小。您想帮助地图根据屏幕大小进行缩放吗？

我从事以下工作，但不能做我想做的事。

<style type="text/css">
   body{
   background:#fff;}
   #map{
   width:1050px;
   height:620px;
   position:relative;}
   #map svg {
   position: relative;top:
   -100px; 
   left: 0px;}
   svg > a {cursor: pointer;display:block;}
   #sehir{font-size:30px;text-align:center;margin-top:25px;color:#666;}
</style>
<div>
</div>
<div id="sehir"></div>
<div id="map"></div>

Answer 1

在您启动ID为Raphael的{{1}}时通过 width map。在其下方以in %和width 100%开头。

height 800px

还使用var r = Raphael('map', '100%', '800'),从内联css中删除width和height

#map

Answer 2

使用Jquery窗口调整大小以将width和height设置为setViewBox和setSize。看看下面的代码，其中调整窗口大小。

JS

var w = 1000, h=500;
var r = Raphael('map', w, h),
attributes = {
    fill: '#666',
    stroke: '#fff',
    'stroke-width':.5,
    'stroke-linejoin': 'round',
},

arr = new Array();

r.setViewBox(10, 100, w,h,true);
r.setSize('100%', '100%');

$(window).resize(function(){
    r.setViewBox(10,100,w,h,true);
    r.setSize('100%', '100%');
});

CSS

#map {
  position: relative;
  border: 1px solid red;
}

#map svg {
  position: relative;
}

svg>a {
  cursor: pointer;
  display: block;
}

通过Divin尺寸设置地图？

2 个答案: