Javascript 谷歌地图API V3在悬停的多边形附近添加一个按钮

我正在使用Google Maps API V3，我想在鼠标悬停时在绘制的多边形附近显示一个可单击的图像。

到目前为止，我能够创建此事件，但我不知道如何在多边形附近显示此图像。理想情况下，我希望此图像显示在鼠标进入多边形的位置。

这是我的一段代码，但只是一次尝试，图像没有显示，所以它非常不完整（可能是错误的）。你可以建议我做其他，Javascript不是我的首选语言

google.maps.event.addListener(polygon, 'mouseover', function(e) {
    this.setOptions( {fillOpacity: 0.1} );

    polygon["btnMyButtonClickHandler"] = {};
    polygon["btnMyButtonImageUrl"] = MyImage;
    displayMyButton(polygon);
});

function displayMyButton(polygon) {
    var path = polygon.getPath();
    var myButton = getMyButton(path.btnMyButtonImageUrl);

    if(myButton.length === 0) 
    {
        console.log("IN"); //Is displayed in the console
        var myImg= $("img[src$='http://linkToMyImage.png']");

        myImg.parent().css('height', '21px !important');
        myImg.parent().parent().append('<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; width: 30px; height: 27px;top:21px;"><img src="' + path.btnMyButtonImageUrl+ '" class="myButtonClass" style="height:auto; width:auto; position: absolute; left:0;"/></div>');

    // now get that button back again!
    myButton = getMyButton(path.btnMyButtonImageUrl);
    myButton.hover(function() { 
        $(this).css('left', '-30px'); return false; }, 
        function() { $(this).css('left', '0px'); return false; });
    myButton.mousedown(function() { $(this).css('left', '-60px'); return false;});
    }

    // if we've already attached a handler, remove it
    if(path.btnDeleteClickHandler) 
        myButton.unbind('click', path.btnMyButtonClickHandler);

    myButton.click(path.btnMyButtonClickHandler);
}

function getMyButton(imageUrl) {
    return  $("img[src$='" + imageUrl + "']");
}

当我的鼠标进入多边形并且不移动时，div会出现，除非我的鼠标悬停在div上（它悬停在多边形上）。在这种情况下，事件似乎不断地被调用。我们如何避免这种情况，并让div在鼠标进入多边形后处于初始位置？

---

这是您的修改：

您需要创建一个元素来保存可单击的图像。使其

位置：绝对具有比地图容器更大的z索引。要将其放置在特定位置，请检查多边形上的鼠标位置
mouseover
事件，并相应地设置元素位置。希望这有帮助

编辑：是的，将其包装在DIV中是个好主意。这里有一个简单的小提琴来展示这些概念。对不起，当然是
mouseover
而不是我第一次写的
mouseenter

我真的不知道如何创建保存我可点击图像的元素，你能给我提供一段代码吗？我试图将其封装在
中，但屏幕上没有显示任何内容…好的，非常感谢，这比我尝试做的要容易得多。。。接受答案前的最后一点：你的“某物在这里”div跟随鼠标指针，而我需要被点击。一旦指针位于多边形内，如何停止div移动？有什么简单的css技巧吗？这就是鼠标悬停的问题。。。当鼠标在多边形上移动时，事件将连续激发。我会考虑显示div点击。这可能是一个解决方案吗？不幸的是，它不能。请看一下我的第一篇文章的编辑部分和修改后的JSFIDLE I链接。好的，我终于找到了解决方案。我会在几个小时后更新你的JSFIDLE。谢谢你告诉我实现这一目标的方法！！
google.maps.event.addListener(polygonPath, 'mouseover', function (event) {
    if( $("#map_overlay").css('display') == "none")
    {
        $("#map_overlay").css({
                               'position': 'absolute',
                               'display': 'block',
                               'left': event.Sa.pageX,
                               'top': event.Sa.pageY
                              });
     }
 });