提示信息

提示信息在很多业务场景中都需要，比如显示当前位置周边的饭店列表，或者点击饭店，显示饭店详细信息，交通路线，电话号码等等。 鉴于显示的业务信息比较多，所以通常的做法都是采用overlay的方式来做。 用传统的HTML来布局和排版信息，然后附加到地图上的指定位置就可以了。 官网中提供了一个具体的例子： popup。 下面就解读一下这个例子的代码：

<!--此处用html布局，各种样式均在css中定义好了-->
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

......

<script>

  // 获取到popup的节点
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');

  // 创建一个overlay, 绑定html元素container
  var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  }));

  ......

  // 监听地图点击事件
  map.on('singleclick', function(evt) {
      // 获取当前点击坐标，并设置到HTML元素上去
    var coordinate = evt.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));

    content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
        '</code>';
    // 设置overlay的位置，从而显示在鼠标点击处
    overlay.setPosition(coordinate);
  });

</script>