2013-05-15 69 views
1

我在Openlayers地图上有“N”个标记,我需要“标记”这些标记(含义:将文本放在/上) 我尝试了几种方法,达到我所需要的。带有自定义文本/标签的OpenLayers标记

我的JS代码片段(移除了一些代码irrevelant东西):

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); 

     } 

    } 

} 

} 

我需要做的就是把/标签或文字在地图上的每个标记是什么。

回答

1

因为无论如何您都是从服务器获取标记数据,所以您可以做的是,在地图文件中创建一个图层,只定义标签类并将其作为覆盖图添加到标记图层上。

希望这会有所帮助。

-1

除了向标记添加文本(或标签)之外,还可以将标记添加到标签。

这是通过创建与locationtitledescription和路径新建一个文本文件做你的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创建。

有一个在线example here

+0

如何在不使用外部文本文件的情况下执行此操作?例如,如果您在加载页面后需要从API源动态提取标记数据,并且需要从该数据中动态创建标记, –