<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> <link rel="stylesheet" href="css/ol.css"> <script src="js/jquery-1.11.3.js"></script> <script src="js/ol.js"></script> <style> .map { height: 100%; width: 100%; } .ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "✖"; } </style> </head> <body> <h2>My Map</h2> <div id="map" class="map"> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content" style="300px; height:120px;"></div> </div> </div> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); closer.onclick = function() { overlay.setPosition(undefined); closer.blur(); return false; }; var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({ element: container, autoPan: true, autoPanAnimation: { duration: 250 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度. } })); map.addEventListener('click', function(evt) { var coordinate = evt.coordinate; var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326')); content.innerHTML = '<p>你点击的坐标是：</p><code>' + hdms + '</code>'; overlay.setPosition(coordinate); map.addOverlay(overlay); }); </script> </body> </html>
