MapTalks 是一个 JavaScript 开源库,用于构建交互式的 web 空间应用。其 InfoWindow 组件(信息框)在默认情况下可能并不支持内容的滚动,但是你可以通过自定义 HTML 和 CSS 来实现这一功能。
下面是一个简单的示例:
var content = ` <div style="width: 200px; height: 150px; overflow-y: auto;"> <!-- Your long content here --> <p>这里是一段很长很长的内容...</p> <p>...</p> </div> `; new maptalks.ui.InfoWindow(content, { position : [116.397428, 39.908637], width : 200, height : 150 }).addTo(map);
在这个例子中,我们创建了一个具有固定高度(150px)和宽度(200px)的信息框,并设置了 `overflow-y: auto`,这样当内容超过信息框的高度时,就会出现垂直滚动条以供用户滚动查看完整内容。
<!DOCTYPE html><html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>空间与UI组件 - 信息框内容支持滚动</title> <style type="text/css"> html,body{margin:0px;height:100%;width:100%} .container{width:100%;height:100%} .panel{border-radius:5px;padding:10px;position:absolute;z-index:1;right:10px;top:10px;border:1px solid gray;background-color:white} .panel .item{line-height:40px} .info-content{height:150px;width:300px;overflow:scroll} </style> <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css"> <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script> <body> <div id="map" class="container"></div> <script> var baseLayer = new maptalks.TileLayer('base', { urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', subdomains: ['a','b','c','d'], attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>' }); var map = new maptalks.Map('map', { center: [114.26012989831725, 30.616193225646924], zoom: 18, pitch: 60, attribution: true, zoomControl: true, baseLayer: baseLayer }); var layer = new maptalks.VectorLayer('layer', { }).addTo(map); var point = new maptalks.Marker(map.getCenter()); layer.addGeometry(point); point.setInfoWindow({ title: 'hello maptalks', content: '<div class="info-content"><video controls width="450" height="300" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video></div>' }); point.openInfoWindow(); </script> </body></html>
评论可见,请评论后查看内容,谢谢!!!
发表评论