View on GitHub

mapCanvas

基于jQuery和Raphaël的中国地图

Download this project as a .zip file Download this project as a tar.gz file

Demo

Demo Code

$(function(){
  var $map     = $('#demo-map'),
      $console = $('#demo-console');
  $.getJSON('javascripts/chinamap.json', function(data){
    $map.mapCanvas(data, {
      bubble: function(area){
        var hints = [
          '可以自定义bubble内容哦',
          '点我试试'
        ],
        i = Math.random() > 0.5 ? 1 : 0;
        return area.name + '<br>' + '<small>' + hints[i] + '</small>';
      },
      onAreaClick: function(){
        var me = this;
        if (!me.data('hilight')) {
          me.setFillColor('#BCF');
          me.data('hilight', true);
          $console.html('你去过了<b>' + me.name + '</b>');
        }
        else {
          me.setFillColor();
          me.data('hilight', false);
          $console.html('你没去过<b>' + me.name + '</b>');
        }
      }
    });
  });
});

Documentation, Source Code, Issues

View on github.