Question

我正在使用Bing地图在世界地图上显示地图点。

我面临的问题是，如果标签（MapPoints [i] .city）文本超过9个字符（图钉宽度; 60），则会截断文本。

如果我将宽度从60增加到160.标签完全显示，但是mappoint正在移动到实际位置的左侧。

我尝试过不同的组合，但没有用。我想展示完整的标签，但不希望图钉远离地图上的实际位置。

我该怎么做？

由于

 img = MapPoints[i].group + '.png';
 var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(MapPoints[i].lat), parseFloat(MapPoints[i].lon))
        , {
            icon: img,
            height: 50, width: 60, text: MapPoints[i].city, typeName: 'clrval'

        });

    pushpin.Title = MapPoints[i].name;
    pushpin.description = MapPoints[i].desc;
    pushpin.cityID = MapPoints[i].cityID;
    pushpin.city = MapPoints[i].city;
    pushpin.typeName = 'clr';

dataLayer.push（图钉）;

CSS类如下

.clrval div { color: blue !important; 
left: 5px !important;  
text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  
font: 12px arial,sans-serif !important; 
}

Answer 1

我不是太对JS有经验但是你不能只是偏移引脚以使其位于正确的位置？

Answer 2

我们可以按如下方式将锚属性添加到图钉主播：新的Microsoft.Maps.Point（12,36）＆＃34; 12,36表示使用的图钉图标的大小。＆＃34;

 var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(MapPoints[i].lat), parseFloat(MapPoints[i].lon))
        , {
            icon: img,
            height: 50, width: eval("widthval"), text: MapPoints[i].city, typeName: 'clrval', anchor: new Microsoft.Maps.Point(12, 36)
            , textOffset:(0,0)


        });

如果我们设置了锚属性，那么它就不会离开BingMaps上的位置。

Answer 3

您可以通过定义边距来调整位置：

a.clrval img{
    margin-left: 8px;
    margin-top: 4px;
}

Bing Map图钉宽度设置将图钉移离地图位置

3 个答案: