Question

我需要http://pfitr.net/frontend/compliant-reporting.html

的美国互动地图

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

我使用http://newsignature.github.io/us-map/的脚本和raphael.js＆amp; 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>

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

任何帮助？

Answer 1

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

$('#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'}
  });

}

美国互动地图

1 个答案: