1

我尝试使用位于http://datamaps.github.io/datamaps的数据地图指南和插件来创建它们在示例中显示的气泡。但是，气泡没有出现。我在代码中缺少什么。谢谢你。

这是我的 jsfiddle 的链接：https ://jsfiddle.net/centem/882qLzty/ 

<div id="container" style="position:relative; width:500px; height:300px;"></div>
        <script>
            var map = new Datamap({element: document.getElementById("container")});

            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 + ''
              }
            });
        </script>

谢谢你。

4

1 回答 1

1

您正在这里初始化数据映射：

var map = new Datamap({element: document.getElementById("container")});

然后再次使用错误的 DOM ID 进行初始化（没有 DOM id气泡）。

var bubble_map = new Datamap({
              element: document.getElementById("bubbles"),<---it should be container
              geographyConfig: {
                popupOnHover: false,
                highlightOnHover: false

使固定：

1) 您不应在相同的 DOM ID 上再次初始化数据映射。

2) 您需要更正气泡数据图的 DOM ID。

更正的代码在这里

于 2017-08-31T08:54:27.800 回答