具有自定义文本/标签的OpenLayers标记

Question

我在Openlayers地图上有“ N”个标记，我需要“标记”这些标记（意思是：在它们上面/里面放一个文字），我尝试了几种方法，但仍然无法实现我所需要的。

我的JS代码段（从代码中删除了一些无关紧要的内容）：

function getWeatherInfo(){
if(wheatherOfCitiesMarkerLayer == null){
    wheatherOfCitiesMarkerLayer = new OpenLayers.Layer.Markers("WeatherMarkerLayer");
    map.addLayer(wheatherOfCitiesMarkerLayer);
}

$.getJSON(qryPointResultListForAllCities(),  function(data) {   
    if(data!= null){
        var size = new OpenLayers.Size(60,45);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);

        for(var i = 0; i < data.pr.length; i ++){   

            // Create markers by using the returned data from the server
            //...
            //... Removed some irrevelant stuff

            var lat = data.pr[i].la;
            var lon = data.pr[i].lo;
            var infos = data.pr[i].info.infos;
            var infop = data.pr[i].info.infop;
            var infocc = data.pr[i].info.infocc;

            var icon = new OpenLayers.Icon('my_marker_img.png',size,offset);

            location = new OpenLayers.LonLat(lon, lat);
            location = transformFromWGS1984ToSphericalMercator(location.clone());
            marker = new OpenLayers.Marker(location,icon.clone());

            wheatherOfCitiesMarkerLayer.addMarker(marker);

        }

    }

}

}

我需要做的是在地图上的每个标记上/上放置一个标签或文本。

Answer 1

由于无论如何都是从服务器获取标记数据，因此您可以做的是，在地图文件中创建一个仅定义了标签类的图层，然后将其作为叠加层添加到您的标记图层上。

希望这可以帮助。

Answer 2

您可以将标记添加到标签中，而不是向标记添加文本（或标签）。

这是通过创建带有location ， title ， description和icon路径的新文本文件完成的（不需要，如果未设置，它将使用默认值）。 例如，如果要在地图上放置两个标记，则文本文件可能如下所示

point  title              description            icon
10,99  An labeled marker  with default image     
12,34  Another marker     This is my label text  http://example.com/marker.png

请注意，名称和参数之间应该有制表符 ，不能有空格。 第二行的末尾还有一个选项卡，其中没有图标。

将此文件保存在您网站上的某个位置，并将此代码放在初始化图层的位置。

var textl = new OpenLayers.Layer.Text("text", {location : "data_dile.txt"});
map.addLayer(textl);

可以通过服务器端语言（例如PHP）动态创建文本文件。

这里有一个在线示例 。