-2

我需要http://pfitr.net/frontend/compliant-reporting.html的美国交互式地图

在蓝色栏中有选择下拉菜单。选择州应在左侧显示该州名称，在地图中选择相应的州，然后在地图的右侧显示与该州相对应的文本。

我在http://newsignature.github.io/us-map/上使用了 带有 raphael.js 和 scale.raphael.js的脚本

Javascript / jQuery

$(document).ready(function() {
  $('#map').usmap({
    'click' : function(event, data) {
      $('#alert')
        .text(data.name)
        .stop();

    }
  });
});

var paper = new ScaleRaphael("#map", 500, 310);
function resizePaper(){
  var win = $(this);
  paper.changeSize(win.width(), win.height(), true, false);
}
resizePaper();
$(window).resize(resizePaper);

html

<div class="blue-bar">
    <div class="sub-title-left" >
          <h1 class="us-state" id="alert">missouri</h1>
    </div>
</div>

<div class="report-content2">
      <div class="usa-map"><div id="map" style="width: 510px; height: 310px;">   
      </div>  </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

但是调整窗口大小时缩放不起作用。它是响应式网站。

有什么帮助吗？

4

1 回答 1

0

可能有更好的方法，但也许是这样的？ 

$('#map').usmap({
   // The click action
   click: function(event, data) {
      SelectState(data.Name, [SOMECOLOR]);
   }
});


$([SelectYourDropDown]).change(function(){

    var stateAbb = //set the abbreviation for the state

    $('#map').usmap('trigger', stateAbb, 'click');
});

function SelectState(state, color)
{
   ResetStates();

   $('#map').usmap({
      state: {fill : color}
   });
}

function ResetStates()
{
  $('#map').usmap({
     stateStyles: {fill: 'blue'}
  });

}
于 2013-08-08T21:58:04.927 回答