必应地图图钉图标问题

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

我使用此代码创建引脚。悬停时，我看到了新的图钉，在鼠标悬停时，它又恢复了原样。但是，它有透明区域，悬停时我可以看到它下方的非悬停图钉的一部分。

为了将其带到最前沿，我们尝试更改 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;
}

由于性能问题，目前形状不支持 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

相关内容

最新更新

热门标签：