OpenStreetMap在地图上添加标签

Question

我正在使用openstreetmap和OpenLayers开发webapp。我所做的是使用JavaScript在地图上渲染一条线，并给出一些给定点，如下面的屏幕截图：

现在我想做的是在线上方显示一个标签，如下所示：

我不确定如何通过JavaScript实现这一点，我找不到任何有用的参考文档。任何人都这样做之前请分享一些经验。
谢谢！

Answer 1

尝试使用样式标签创建不透明（或零宽度）点。这是基于Labeled Features Example的命题。 （我现在没有可能测试它，所以小心）。

首先：使用不可见点和一些参数设置新的矢量图层（因为样式设置可能会干扰当前图层的线条）：

var vectorLayer = new OpenLayers.Layer.Vector("Labeled points", {
    styleMap: new OpenLayers.StyleMap({'default':{
        // should be invisible, if not, set opaque
        strokeWidth: 0,
        pointRadius: 0,
        // label may have \n linebreaks
        label : "${label}",
        fontColor: "${fontColor}",
        fontSize: "12px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelAlign: "${align}",
        labelXOffset: "${xOffset}",
        labelYOffset: "${yOffset}",
        labelOutlineColor: "white",
        labelOutlineWidth: 3
        }})
    });

第二：以下是使用给定参数（$ {parameter}）创建特征的方法：

var newLabeledPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
var newLabeledFeature = new OpenLayers.Feature.Vector(newLabeledPoint );
    newLabeledFeature .attributes = {
        label: "Line 1",
        fontColor: 'blue',
        align: "cm",
        // positive value moves the label to the right
        xOffset: 50,
        // negative value moves the label down
        yOffset: -15
    };

最后：vectorLayer.addFeatures([newLabeledFeature]);。