使用数据图悬停时的图像徽标

Question

我正在处理数据地图。通过示例学习。

这是提供的演示：http://jsbin.com/nutawiboci/1/edit?html,output

我正在尝试让徽标显示在悬停时 - 就像鼠标悬停在气泡上一样，你会得到一个字符串和一个图像，比如 img https://www.w3schools.com/tags/smiley.gif

当我尝试使用 img src="image url here" alt="smiley" 将其添加到 popupTemplate 时，代码不会运行.

popupTemplate: function(geo, data) {
return "<div class='hoverinfo'>It is " + data.name + "</div>";
}

- 这是最接近我要找的东西，但我仍然无法让它用于数据映射。

你能帮忙吗？谢谢。

Answer 1

代码里面的popupTemplate是可以的，不过是针对上面数组的圆角气泡调用的。我也尝试添加笑脸 img，它工作正常。

如果你想在地理区域上放置自定义弹出窗口，你必须将 geographyConfig 添加到 Datamap 初始化，使用 popupTemplate，例如在 data:

之后

var map = new Datamap({
    ...
    data: {...}

    geographyConfig: {
      popupTemplate: function(geo, data) {
        return "<div class='hoverinfo'>It is " + geo.properties.name + "</div>";
      }
    }
}

这里有工作示例：http://jsbin.com/zojuqideto/edit?html,output

使用数据图悬停时的图像徽标

Image logo on hover using datamaps

html

datamaps