Openlayers - 弹出标记的信息数组

时间:2011-03-01 13:54:37

标签: javascript openlayers

我有一个数据库(db)的连接。我从数据库中获取了lon,lat和name并且使用它们:

while ($row_ChartRS = mysql_fetch_array($sql1))
{
$latitude=$row_ChartRS['latitude'];
$longitude=$row_ChartRS['longitude'];
$bus_name =$row_ChartRS['short_name'];
//echo  $latitude.'--'.$longitude.'<br>';
echo  $bus_name;

然后我创建一个地图来显示数据。标记适用于所有lat,lon位置。代码:

function init()
  {

    projLonLat   = new OpenLayers.Projection("EPSG:4326");   // WGS 1984
    projMercator = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator

    overviewMap = new OpenLayers.Control.OverviewMap();

    //adding scale ruler
    scale = new OpenLayers.Control.ScaleLine();
    scale.geodesic = true; // get the scale projection right, at least on small

    map = new OpenLayers.Map('demoMap',
                             { controls: [ new OpenLayers.Control.Navigation(),    // direct panning via mouse drag
                                           new OpenLayers.Control.Attribution(),   // attribution text
                                           new OpenLayers.Control.MousePosition(),    // where am i?
                                           new OpenLayers.Control.LayerSwitcher(),    // switch between layers
                                           new OpenLayers.Control.PanZoomBar(),    // larger navigation control
                                           scale,
                                           overviewMap                             // overview map
                                         ]
                             }
                            );

    map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
    map.addLayer(new OpenLayers.Layer.OSM.Osmarender("Osmarender"));


    //Create an explicit OverviewMap object and maximize its size after adding it to the map so that it shows
    //as activated by default.
    overviewMap.maximizeControl();

    //Adding a marker
    markers = new OpenLayers.Layer.Markers("Vehicles");
    map.addLayer(markers);

    vectorLayer = new OpenLayers.Layer.Vector('Routes');
    map.addLayer(vectorLayer);

    for (k in Locations)
    {

    //adding a popup for the marker
    var feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(Locations[k].lon, Locations[k].lat).transform(projLonLat,projMercator));

    //true to close the box
    feature.closeBox = true;

    feature.popupClass = new OpenLayers.Class(OpenLayers.Popup.AnchoredBubble,
    {
      //create the size of the box
      'autoSize': true,
      'maxSize': new OpenLayers.Size(100,100)
    });

    //add info into box
    for (z in names)
    {
    feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[z]).transform(projLonLat,projMercator));

    }

    //puts a scroll button on box to scroll down to txt
    //feature.data.overflow = "auto";

    marker = feature.createMarker();
    marker.display(true);

    markerClick = function (evt) {
      if (this.popup == null) {
        this.popup = this.createPopup(this.closeBox);
        map.addPopup(this.popup);
        this.popup.show();
      } else {
        this.popup.toggle();
      }
      currentPopup = this.popup;
      OpenLayers.Event.stop(evt);
    };

    marker.events.register("mousedown", feature, markerClick);
    markers.addMarker(marker);
    map.setCenter(new OpenLayers.LonLat(Locations[k].lon, Locations[k].lat).transform(projLonLat,projMercator), zoom);

    var lonLat1 = new OpenLayers.LonLat(Locations[k].lon,Locations[k].lat).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
    var pos2=new OpenLayers.Geometry.Point(lonLat1.lon,lonLat1.lat);
    points1.push(pos2);


    //Uncomment to put boxes in when map opens
    //feature.popup = feature.createPopup(feature.closeBox);
    //map.addPopup(feature.popup);
    //feature.popup.show()
      }

  var lineString = new OpenLayers.Geometry.LineString(points1);
  var lineFeature = new OpenLayers.Feature.Vector(lineString,'',style_green);
  vectorLayer.addFeatures([lineFeature]);
  map.setCenter(lonLat1,zoom);

  } //function

但弹出标记中的名称对于所有标记都是相同的。即从数据库中提取的姓氏。任何人都可以帮忙解决这个问题 - 我已经花了整整3天试图修复它!

提前致谢!

2 个答案:

答案 0 :(得分:0)

一些评论:

  1. 您发布的PHP代码完全不相关,因为它看不到任何地方使用。
  2. 对象namesLocations未在您发布的代码中的任何位置声明。它们包含什么?
  3. 在下面引用的代码中,您创建了多个新的Feature对象,但是将它们全部分配给同一属性(从而每次都覆盖该属性)。这是故意的吗?

    //add info into box
    for (z in names) {
        feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[z]).transform(projLonLat,projMercator));
    }
    
  4. 修改 这似乎是它出错的地方。您应该删除for ... z循环,并将其替换为以下代码:

    //add info into box
    feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[k]).transform(projLonLat,projMercator));
    

    因为在PHP中,你使用相同的索引($v)来填充两个数组,所以使用相同的索引在javascript中读取它们是有意义的...


    除此之外,对于a number of reasons,在Javascript数组上使用for...in循环不被视为良好做法。最好使用以下内容:

    for (k = 0; k < Locations.length; k += 1) {
        // your code
    }
    

答案 1 :(得分:0)

我有同样的问题,我解决了...... 问题是覆盖 你不必在函数内部循环,为函数执行循环,例如:

function init(z)
{
    feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[z]).transform(projLonLat,projMercator));
}


for (z in names)
{
    init(z)
}