在加载地图时打开一个弹出窗口

时间:2014-06-10 16:22:49

标签: javascript openlayers

我用OpenLayers创建了一张地图。一切都很好! 但我需要在地图加载时默认打开一个弹出窗口,但我无法弄清楚如何。

由于我在运行中创建并销毁弹出窗口,我试图模拟销钉上的咔哒声,但它没有用。·
有人有想法吗?

代码

function createMap() {
  var options = { 
     theme: null 
  }; 
  map = new OpenLayers.Map('map', options); 
  map.addLayer(new OpenLayers.Layer.OSM()); 
  epsg4326 =  new OpenLayers.Projection('EPSG:4326'); 
  projectTo = map.getProjectionObject(); 
  var lonLat = new OpenLayers.LonLat(mark.longitude, mark.latitude).transform(epsg4326, projectTo); 
  var zoom = 15; 
  map.setCenter(lonLat, zoom); 
  var vectorLayer = new OpenLayers.Layer.Vector('Overlay'); 

  for(x=0; x<stores.length; x++) {
    var feature = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(stores[x].lon, stores[x].lat).transform(epsg4326, projectTo), 
      {description: stores[x].desc}, 
      {externalGraphic: 'marker.png', graphicHeight: 40, graphicWidth: 20, graphicXOffset: -10, graphicYOffset: -20}
    ); 
    vectorLayer.addFeatures(feature); 
    map.addLayer(vectorLayer); 
  };

  var controls = { 
    selector: new OpenLayers.Control.SelectFeature(vectorLayer, { 
      onSelect: createPopup, 
      onUnselect: destroyPopup 
    }) 
  };

  map.addControl(controls['selector']); 
  controls['selector'].activate();
};

function createPopup(feature) {
  feature.popup = new OpenLayers.Popup(
    'pop',
    feature.geometry.getBounds().getCenterLonLat(),
    null,
    '<div>' + feature.attributes.description + '</div>',
    null,
    false,
    function() {
      controls['selector'].unselectAll();
    }
  );
  map.addPopup(feature.popup);
}

function destroyPopup(feature) {
  feature.popup.destroy();
  feature.popup = null;
}

商店是ajax调用返回的值,其中包含具有纬度,经度,地址,电话等的商店列表。

1 个答案:

答案 0 :(得分:1)

您需要从OpenLayers.Layer.Vector(在您的情况下为layerVector)中选择最接近地图中心的功能,然后创建弹出窗口并将弹出窗口添加到该功能,例如

//select feature closest to center of map, ie, 
//find features[i] of Layer.Vector's features array.
var feature=layerVector.features[i];
addPopup(feature);

function addPopup(feature){

    var popup = new OpenLayers.Popup.FramedCloud(
       'pop',
        feature.geometry.getBounds().getCenterLonLat(),
        null,
        '<div>' + feature.attributes.description + '</div>',
        null,
        true, //add a close box
        null
    );

   feature.popup = popup;
   map.addPopup(popup);
}

如果我正确地理解了这个问题,这是一种可能性。有一个很好的示例http://openlayers.org/dev/examples/light-basic.html,它显示了如何在事件监听器弹出窗口上添加鼠标,并且这使用了相同的逻辑,但是已经选择了一个功能来添加弹出窗口。