如何使用谷歌地图 api 创建密度图

Question

我想创建一个类似于下面链接的密度图

http://www.guardian.co.uk/news/datablog/interactive/2011/jun/22/us-casualties-afghanistan-state

谁能告诉我如何创建这种类型的地图。

谢谢

Answer 1

他们使用FusionTablesLayer 来执行此操作。

他们的地图相关 JS 完整来自该页面：

var center = new google.maps.LatLng(38.0000,-97.0000);
var zoom = 4;
var legend_width = '150px';
var tableid = 1038573;
var location_column = 'geo';
var columns = {
  'Killed in action': [
    {
      'min': 0,
      'max': 10,
      'color': '#f4cccc'
    },
    {
      'min': 10,
      'max': 30,
      'color': '#ea9999'
    },
    {
      'min': 30,
      'max': 60,
      'color': '#cc0000'
    },
    {
      'min': 60,
      'max': 90,
      'color': '#990000'
    },
    {
      'min': 90,
      'max': 130,
      'color': '#660000'
    }
  ],
   'Killed, not in action': [
    {
      'min': 1,
      'max': 10,
      'color': '#f4cccc'
    },
    {
      'min': 10,
      'max': 20,
      'color': '#ea9999'
    },
    {
      'min': 20,
      'max': 30,
      'color': '#cc0000'
    }
  ],
'Wounded in action': [
    {
      'min': 0,
      'max': 100,
      'color': '#f4cccc'
    },
    {
      'min': 100,
      'max': 200,
      'color': '#ea9999'
    },
    {
      'min': 200,
      'max': 400,
      'color': '#cc0000'
    },
    {
      'min': 400,
      'max': 600,
      'color': '#990000'
    },
    {
      'min': 600,
      'max': 1000,
      'color': '#660000'
    }
  ],
  'Total deaths in Afghanistan per 100,000 pop': [
    {
      'min': 0,
      'max': 0.2,
      'color': '#f4cccc'
    },
    {
      'min': 0.2,
      'max': 0.4,
      'color': '#ea9999'
    },
    {
      'min': 0.4,
      'max': 0.6,
      'color': '#cc0000'
    },
    {
      'min': 0.6,
      'max': 1,
      'color': '#990000'
    },
    {
      'min': 1,
      'max': 2,
      'color': '#660000'
    }
  ],
  'Wounded, per 100,000 pop': [
    {
      'min': 0,
      'max': 2,
      'color': '#f4cccc'
    },
    {
      'min': 2,
      'max': 3,
      'color': '#ea9999'
    },
    {
      'min': 3,
      'max': 4,
      'color': '#cc0000'
    },
    {
      'min': 4,
      'max': 5,
      'color': '#990000'
    },
    {
      'min': 5,
      'max': 8,
      'color': '#660000'
    }
  ]
}

var map, layer;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var style = [
    {
      featureType: 'administrative',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];

  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });

  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');


  layer = new google.maps.FusionTablesLayer({
    query: {
      select: location_column,
      from: tableid
    }
  });
  layer.setMap(map);

  init_selectmenu();
  addStyle(getKey());
}

function getKey() {
  for(key in columns) {
    return key;
  }
}

// Initialize the drop-down menu
function init_selectmenu() {
  var selectmenu = document.getElementById('selector');
  for(column in columns) {
    var option = document.createElement('option');
    option.setAttribute('value', column);
    option.innerHTML = column;
    selectmenu.appendChild(option);
  }
}

// Apply the style to the layer
function addStyle(column) {
  var defined_styles = columns[column];
  var styles = new Array();

  for(defined_style in defined_styles) {
    var style = defined_styles[defined_style];
    styles.push({
      where: generateWhere(column, style.min, style.max),
      polygonOptions: {
        fillColor: style.color,
        fillOpacity: style.opacity ? style.opacity : 1
      }
    });
  }

  layer.set('styles', styles);
  updateLegend(column);
}

// Create the where clause
function generateWhere(column_name, low, high) {
  var whereClause = new Array();
  whereClause.push("'");
  whereClause.push(column_name);
  whereClause.push("' >= ");
  whereClause.push(low);
  whereClause.push(" AND '");
  whereClause.push(column_name);
  whereClause.push("' < ");
  whereClause.push(high);
  return whereClause.join('');
}

// Create the legend with the corresponding colors
function updateLegend(column) {
  var legendDiv = document.createElement('div');
  var legend = new Legend(legendDiv, column);
  legendDiv.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].pop();
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);
}

// Generate the content for the legend
function Legend(controlDiv, column) {
  controlDiv.style.padding = '10px';
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.width = legend_width;
  controlUI.title = 'Legend';
  controlDiv.appendChild(controlUI);
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';

  controlText.innerHTML = legendContent(column);
  controlUI.appendChild(controlText);
}

function legendContent(column) {
  var defined_styles = columns[column];

  // Generate the content for the legend using colors from object
  var controlTextList = new Array();
  controlTextList.push('<p><b>');
  controlTextList.push(column);
  controlTextList.push('</b></p>');
  for(defined_style in defined_styles) {
    var style = defined_styles[defined_style];
    controlTextList.push('<div style="background-color: ');
    controlTextList.push(style.color);
    controlTextList.push('; height: 20px; width: 20px; margin: 3px; float: left;"></div>');
    controlTextList.push(style.min);
    controlTextList.push(' - ');
    controlTextList.push(style.max);
    controlTextList.push('<br style="clear: both;"/>');
  }

  controlTextList.push('<br />');
  return controlTextList.join('');
}

Answer 2

我的addin for Excel 正是这样做的。