openlayers點選地圖圖示，圖示跳動 動畫Demo實現 (複製內容至html檔案可檢視效果)
阿新 • • 發佈：2021-11-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" /> <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script> <title>openlayers 標記點閃爍</title> </head> <body> <div id="map"></div> <div id="baidu"><img src="https://www.baidu.com/img/flexible/logo/pc/[email protected]"></div> <script> var beijing = ol.proj.fromLonLat([116.28, 39.54]); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: beijing, zoom: 4 }) }); var tip = document.getElementById('baidu'); var overlay = new ol.Overlay({ element: tip, positioning: 'center-center' }); overlay.setPosition(beijing); map.addOverlay(overlay) let flag = true let animate = null tip.onclick = () => { clearInterval(animate) animate = setInterval(() => { flag = !flag let po = flag ? '10px' : '-10px' tip.style.top = po }, 500); } </script> </body> <style> #baidu { width: 100px; position: absolute; top: 10px; } img { width: 100%; } </style> </html>