0

我查看了几个示例,并根据需要拼凑了我自己的世界地图,只是缺少一个细节。我可以用坐标定位地图点,但不能用国家代码定位地图点。

这是我的例子:http: //jsfiddle.net/2sk6hfvz/

{
    "type": "mapbubble", // <<-- change this to 'mappoint', why doesn't ghost icons show up?
    "name": "Ghosts",
    "dataLabels":
    {
        "enabled": false
    },
    "marker":
    {
        "symbol": "url(https://cdn1.iconfinder.com/data/icons/Momentum_MatteEntireSet/32/ghost.png)"
    },
    mapData: mapData,
    joinBy: ['iso-a2', 'code'],
    data:
    [
            {
                name: "Liège",
                code: "SE",
                z: 1
            },
            {
                name: "Buble",
                code: "DE",
                z: 1
            }
        ]
    }

在示例中将“mapbubble”更改为“mappoint”。为什么 mappoint 设置的显示方式与 mapbubble 的显示方式不同,然后使用国家/地区代码?

4

1 回答 1

2

它们工作方式不同的原因是因为在使用“mappoint”时必须传递 x 和 y 坐标。

你的“妖精”数据:

{
    "name": "Adam",
    "x": 1751,
    "y": -9500
}

您的“幽灵”数据(没有“x”和“y”):

{
    name: "Liège",
    code: "SE",
    z: 1
}

如果你给“ghost”数据一些“x”和“y”属性,它就会起作用。请看这个例子

如果您想在不指定任何“x”和“y”的情况下将图像插入地图,您可以尝试的另一件事是通过 dataLabels 进行。在这个例子中,我创建了一张美国地图。每个人口密度小于每平方米 7 人的州都会出现鬼。如果您想采用这种方式,则需要以这种方式使用两个属性:

  1. useHTML: true 因此您可以将 HTML<img>标签作为数据标签
  2. 使用formatter代替format,但请注意您必须将函数传递给formatter

var ghostElem = '<img src="https://cdn1.iconfinder.com/data/icons/Momentum_MatteEntireSet/32/ghost.png"/>';


dataLabels: {
    enabled: true,
    useHTML: true,
    color: 'white',
    formatter: function() { return (this.point.value <7)? ghostElem: null}
}

于 2014-12-17T04:11:51.480 回答