5

所以我基本上使用 Datamaps 示例网站中的默认气泡图。

var bubble_map = new Datamap({
  element: document.getElementById("bubbles"),
  geographyConfig: {
    popupOnHover: false,
    highlightOnHover: false
  },
  fills: {
    defaultFill: '#ABDDA4',
    USA: 'blue',
    RUS: 'red'
  }
});
bubble_map.bubbles([
  {
    name: 'Not a bomb, but centered on Brazil',
    radius: 23,
    centered: 'BRA',
    country: 'USA',
    yeild: 0,
    fillKey: 'USA',
    date: '1954-03-01'
  },
  {
    name: 'Not a bomb',
    radius: 15,
    yeild: 0,
    country: 'USA',
    centered: 'USA',
    date: '1986-06-05',
    significance: 'Centered on US',
    fillKey: 'USA'
  },
  {
    name: 'Castle Bravo',
    radius: 25,
    yeild: 15000,
    country: 'USA',
    significance: 'First dry fusion fuel "staged" thermonuclear weapon; a serious nuclear fallout accident occurred',
    fillKey: 'USA',
    date: '1954-03-01',
    latitude: 11.415,
    longitude: 165.1619
  },{
    name: 'Tsar Bomba',
    radius: 70,
    yeild: 50000,
    country: 'USSR',
    fillKey: 'RUS',
    significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
    date: '1961-10-31',
    latitude: 73.482,
    longitude: 54.5854
  }
], {
  popupTemplate: function(geo, data) {
    return '<div class="hoverinfo">Yield:' + data.yeild + '
Exploded on ' + data.date + ' by the '  + data.country + ''
  }
});

我想要做的是获取我传递给气泡的数据以直接显示在气泡顶部。因此，与其让弹出模板显示，不如data.yield将其显示在气泡上。

谢谢！！

4

0 回答 0