如何将背景图像添加到地图上的图钉的<area />标记

Question

好的，所以我的任务是创建一个带针点和翻转的地图，但我给出的方向是使用热点。我告诉我的首席开发人员，我们可以使用更好的东西，但无济于事。我被困在一个名为rwdImageMaps的非常轻的插件中，这将我的绳索转换为响应式图像。我需要在我标记的位置创建精确定位但我不确定如何在属性上执行此操作。任何帮助都会非常感激，因为我发送给我的演示使用带有引脚的地图图像然后添加他的翻转效果他加载了一个只改变文本颜色的全新地图。我需要它翻滚并增长显示以下某些示例代码和图像的位置描述。感谢大家的投入。

我会解释这些别针 - 它们有一个像图标一样的图钉以及城市/国家的标签名称，然后当你翻过它时，它会显示更多有关该位置的信息。我是否可以通过目前的方式实现这一目标？我不介意将此代码更改为可以实现此结果的更好的代码。

<script src='js/jquery.rwdImageMaps.min.js'></script>
<script>
    $('img[usemap]').rwdImageMaps();

    $('area').on('click', function() {
        alert($(this).attr('alt') + ' clicked');
    });
</script>

<img src="images/worldMap.jpg" width="1170" height="820" usemap="#worldMap" class="worldMap" alt="" />
    <map name="worldMap" class="hidden-xs">
        <area shape="circle" coords="200,320,15" class="marker hidden-xs" href="#chicago" title="Chicago" alt="Chicago" />
        <area shape="circle" coords="350,580,15" class="marker hidden-xs" href="#saopaulo" title="Sao Paulo" alt="Sao Paulo" />
        <area shape="circle" coords="540,310,15" class="marker hidden-xs" href="#amsterdam" title="Amsterdam" alt="Amsterdam" />
        <area shape="circle" coords="810,455,15" class="marker hidden-xs" href="#Mumbai" title="Mumbai" alt="Mumbai" />
        <area shape="circle" coords="940,405,15" class="marker hidden-xs" href="#Shanghai" title="Shanghai" alt="Shanghai" />
    </map>