Bing Maps pushpin icon issues

问题

I have a custom set of icons I'm setting various pins too. When the mouse hovers over them I'd like to bring them to the front and change the style to a different icon.

I use this code to create the pin. OnHover I see the new push pin and on mouseout it returns to how it was. However, it has transparent areas and I can see parts of the non-hover pushpin below it when hovering.

For bringing it to the forefront have tried changing the zIndex value and as far as I can tell it does nothing.

Do I need to refresh the map or something?

Feels like there is something I'm missing.

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

回答1:

Currently shapes do no support zIndexing due to performance issues, but there are plans to add support for this. You can however use two layers for your data, the first to store your main data, and the second to display the hovered data. Below is a code sample that demonstrates hovering a pushpin, changing its style and displaying it above all other shapes on the map. When you mouse out the style goes back to what it was and the pushpin goes back to the main layer.

<!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>

You can try this code sample out here: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle

来源：https://stackoverflow.com/questions/42124293/bing-maps-pushpin-icon-issues

标签

bing-maps

pushpin