必应地图图钉图标问题 [英] 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.
我使用此代码创建图钉.在OnHover上，我看到了新的图钉，并在鼠标移出时恢复了原来的状态.但是，它具有透明区域，当悬停时，我可以看到其下方的非悬停图钉的一部分.
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.
为使其走在最前面，尝试更改zIndex值，据我所知它什么也没做.
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;
}
推荐答案
由于性能问题，当前形状不支持zIndexing，但是有计划添加对此的支持.但是，您可以对数据使用两层，第一层用于存储主数据，第二层用于显示悬停的数据.以下是一个代码示例，该示例演示了如何悬停图钉，更改其样式并将其显示在地图上的所有其他形状之上.当您将鼠标移出时，样式将返回到原来的状态，图钉将返回到主层.
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>
您可以在此处尝试以下代码示例: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle
You can try this code sample out here: http://bingmapsv8samples.azurewebsites.net/#Pushpin_HoverStyle
这篇关于必应地图图钉图标问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
