Question

我有一组自定义图标我也在设置各种图钉。当鼠标悬停在它们上面时，我想将它们带到前面并将样式更改为不同的图标。

我使用此代码创建引脚。 OnHover我看到新的推针和鼠标输出它返回原来的样子。但是，它有透明的区域，我可以在悬停时看到它下面的非悬停图钉的一部分。

为了把它带到最前面，我们尝试更改zIndex值，据我所知，它什么也没做。

我是否需要刷新地图或其他内容？

感觉有些东西我不见了。

function createImagePin(location, obj)
{
    var smallPin = getSmallPin(obj);

    var pin = new Microsoft.Maps.Pushpin(location, {
        icon: smallPin.data,
        visible: true,
        anchor: new Microsoft.Maps.Point(smallPin.width / 2, smallPin.height / 2) //Align center of pushpin with location.
    });

    pin.dataTarget = obj;

    Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e)
    {
        if(e.targetType === 'pushpin')
        {
            var largePin = getLargePin(e.target.dataTarget);
            e.target.setOptions({ icon: largePin.data, anchor: new Microsoft.Maps.Point(largePin.width/2,largePin.height/2) });
        }
    });

    Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e)
    {
        if (e.targetType === 'pushpin')
        {
            var smallPin = getSmallPin(e.target.dataTarget);
            e.target.setOptions({ icon: smallPin.data, anchor: new Microsoft.Maps.Point(smallPin.width/2,smallPin.height/2) });
        }
    });

    return pin;
}

Answer 1

目前，由于性能问题，形状不支持zIndexing，但有计划添加对此的支持。但是，您可以为数据使用两个图层，第一个用于存储主数据，第二个用于显示悬停数据。下面是一个代码示例，演示如何悬停图钉，更改其样式并将其显示在地图上的所有其他形状之上。鼠标移开时，样式会回到原来状态，图钉会回到主图层。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    <script type='text/javascript'>
    var map;

    var defaultColor = 'blue';
    var hoverColor = 'red';
    var mouseDownColor = 'purple';

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'YourBingMapsKey'
        });

        var layer = new Microsoft.Maps.Layer();
        map.layers.insert(layer);

        var hoverLayer = new Microsoft.Maps.Layer();
        map.layers.insert(hoverLayer);

        //Add some random pushpins to fill the map and cover our hoverable main pushpin.
        var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(300, map.getBounds());
        layer.add(pushpins);

        //Create our hoverable pushpin.
        var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
            color: defaultColor
        });

        layer.add(pin);

        Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
            e.target.setOptions({ color: hoverColor });

            //Move pin to hover layer.
            layer.remove(pin);
            hoverLayer.add(pin);
        });

        Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
            e.target.setOptions({ color: mouseDownColor });
        });

        Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
            e.target.setOptions({ color: defaultColor });

            //Move pin to main layer.
            hoverLayer.remove(pin);
            layer.add(pin);
        });
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

您可以在此处试用此代码示例：http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle

Bing Maps图钉图标问题

1 个答案: