Question

我正在尝试使用openlayers在地图上添加多个标记。而且我想显示一个简单的弹出窗口来显示我所拥有的每个标记的信息。让我创建场景。

我们假设这是我的HTML：

  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map">
            <div id="popup"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="single-pop-up">
      <div class="single-pop-up-header">
        <p>test</p>
      </div>
      <div class="single-pop-up-content">
        <img src="http://test/test/test">
      </div>
    </div>
  </body>

让我们假设这是我的js：

  var values = 
  [ 
  {name : "John Doe 1", url : "http://here/is/some/url/I/need", long: 24.806258, lat: -120.334275}, 
  {name : "John Doe 2", url : "http://here/is/some/url/I/need", long: 24.767025, lat: -120.313968}, 
  {name : "John Doe 3", url : "http://here/is/some/url/I/need", long: 24.789318, lat: -120.321595}, 
  {name : "John Doe 4", url : "http://here/is/some/url/I/need", long: 24.791818, lat: -120.322354}
  ];

  //the code to get every marker
  for(i = 0; i<values.length; i++){
    var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([values[i].long, values[i].lat], 'EPSG:4326','EPSG:3857')),
    name: values[i].name,
    url: values[i].url,
    rainfall: 500
    });
  }

  //the code to style the markers
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.9,
    src: 'img/telecamera.png'
    }))
  });

  iconFeature.setStyle(iconStyle);


  var vectorSource = new ol.source.Vector({
    features: [iconFeature]
  }); 

  console.log("=====icon feature=====");
  console.log(iconFeature);
  console.log("=====icon feature=====");

  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  //the code to call the map
  var map = new ol.Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
    center: ol.proj.fromLonLat([19.8187, 41.3275]),
    projection : ol.proj.get['EPSG:3857'],
    zoom: 13 
    })
  });

现在我使用此代码隐藏和显示我的弹出窗口使用jquery-ui

   $(document).ready(function(){
      var test = $( function() {
        $( ".single-pop-up-content" ).dialog({
          autoOpen : false, modal : true, show : "blind", hide : "blind"
          });
      });
  });

  //this is how I track my marker
  /*display popup on click*/
  map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });
    if (feature) {
        //I would like to show the info of markers here 
    } 
    else
    {
      //dont show anything
    }
  });

Answer 1

请注意，您的示例代码并不真正起作用，矢量图层根本不显示任何内容，并且未正确设置样式。

看看OpenLayer示例。一个只显示popup只有OL，另一个显示如何使用jQuery and bootstrap。

相关部分，没有进一步说明：

<!-- Overlay, used as positional reference -->
<div id="overlay"></div>
<!-- The actual dialog -->
<div id="popup" title="Welcome to OpenLayers"></div>


// Popup showing the position the user clicked
var overlay = new ol.Overlay({
  element: document.getElementById('overlay')
});
map.addOverlay(overlay);


$(document.getElementById('popup')).dialog({
  position: {
    my: 'center top',
    at: 'center top',
    of: overlay.getElement()
  },
  autoOpen: false
});

map.on('click', function(evt) {
  // var element = overlay.getElement();
  var popup = document.getElementById('popup');
  var coordinate = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coordinate, 'EPSG:3857', 'EPSG:4326'));

  // this makes the dialog's container place itself
  overlay.setPosition(coordinate);

  popup.innerHTML = '<p>This is ' + hdms + '</p>';
  $(popup).dialog('open')
  $(popup).dialog( "option", "position", {
    my: 'center top',
    at: 'center top',
    of: overlay.getElement()
  });
});

完整的代码是available here。

面对使用Open Layers MAP API显示多个标记的问题

1 个答案: