Bing 地图图钉宽度设置使图钉远离地图位置

Question

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

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

如果我将宽度从 60 增加到 160。标签完全显示，但地图点向实际位置的左侧移动。

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

我该怎么做？

谢谢

 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（图钉）；

CSSclass如下

.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) "12,36 表示使用的图钉图标的大小。"

 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 地图图钉宽度设置使图钉远离地图位置

Bing Map Pushpin width setting moves the pin away from the map location

javascript

css

bing-maps