Question

我正在使用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 + "']");
}

感谢您的建议！

修改

@MrUpsidown，很遗憾没有，click event不能成为解决方案，我真的需要你这里的东西div出现在mouseover。
我修改了你的代码：

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
                              });
     }
 });

当我的鼠标进入多边形并且不移动时，div出现，除非我的鼠标悬停div（悬停多边形）。在这种情况下，事件似乎连续调用。一旦鼠标进入多边形，我们怎样才能避免这种情况并让div处于初始位置？以下是您修改后的内容：fiddle

Answer 1

您需要创建一个元素来保存您的可点击图片。使用比地图容器更大的z-index使position:absolute;成为可能。要将其放置在特定位置，请检查多边形mouseover事件上的鼠标位置，并相应地设置元素位置。希望这会有所帮助。

编辑：是的，将它包装在DIV中是个好主意。这是一个显示概念的简单小提琴。对不起，当然是mouseover，而不像我第一次写的那样mouseenter。

http://jsfiddle.net/upsidown/zrC2D/

Google Maps API V3在悬停的多边形附近添加一个按钮

1 个答案: