按 Divin 大小设置地图？

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

使用 Jquery 窗口调整大小来设置 width 和 height 与 setViewBox 和 setSize。使用 window resize 查看下面的代码。

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;
}

Answer 2

当您使用 id map 发起 Raphael 时，传递 width in %。 下面用width 100%和height 800px发起。

var r = Raphael('map', '100%', '800'),

还使用#map从内联css中删除width和height

#map{
   width:1050px;
   height:620px;
   position:relative;
}