交互式美國地圖功能

Question

我正在使用來自newsignature（http://newsignature.github.com/us-map/）的jquert使用一個非常酷的交互式地圖。我無法確定如何在點擊時爲每個州輸入獨特的信息。換句話說，當用戶點擊華盛頓時，他們會得到一定的信息，而不是點擊阿肯色州時的信息。也許甚至是具有內容樣式的能力。

我使用當前的代碼是：

$(document).ready(function() { 
    $('#map').usmap({ 
    'stateSpecificStyles': { 
     'AK' : {fill: '#0F253F'} 
    }, 
    'stateSpecificHoverStyles': { 
     'HI' : {fill: '#0F253F'} 
    }, 

    'mouseoverState': { 
     'HI' : function(event, data) { 
     //return false; 
     } 
    }, 


    'click' : function(event, data) { 
     $('#alert') 
     .text('Click '+data.name+' copy ') 
     .stop() 
     .css('backgroundColor', '#ff0') 
     .animate({backgroundColor: '#ddd'}, 1000); 
    } 
    }); 


}); 

我想看到什麼發生的是，當你點擊它會顯示有關該狀態與每個狀態相同的信息信息的特定狀態。

Answer 1

那麼，他們點擊的狀態是在data.name屬性。有很多方法可以解決這個問題。你有什麼嘗試？

$('#map').usmap({ 
    // The click action 
    click: function(event, data) { 
    var description = "No state info loaded for this state."; 
    switch(data.name) 
    { 
     case 'IL': 
      description = 'You clicked on the Land of Lincoln!'; 
      break; 
     case 'MO': 
      description = 'You clicked on the Show-Me State!'; 
      break; 
     // etc 
    } 
    $('#clicked-state') 
     .text(description) 
     .parent().effect('highlight', {color: '#C7F464'}, 2000); 
    } 
}); 

其實，現在我的文檔看起來更，你也可以讓國家的具體方法是這樣的：

$('#map').on('usmapclickIL', function(event, data) { 
    $('#clicked-state') 
     .text('You clicked on the Land of Lincoln!') 
     .parent().effect('highlight', {color: '#C7F464'}, 2000); 
});