Maptalks 空间与 UI 组件信息框内容支持滚动，可以通过设置 `scrollable` 属性为 `true` 来实现。以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Maptalks 信息框滚动示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@1.4.0/dist/maptalks.min.css">
<script src="https://cdn.jsdelivr.net/npm/maptalks@1.4.0/dist/maptalks.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<div id="infoBox" style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; z-index: 999;">
<div style="padding: 10px;">
这里是信息框的内容，当内容较多时，可以通过设置 scrollable 属性为 true 来使信息框支持滚动。
</div>
</div>
<script>
var map = new maptalks.Map('map', {
center: [116.397428, 39.916527],
zoom: 10,
baseLayer: new maptalks.TileLayer('base')
});
var infoBox = document.getElementById('infoBox');
infoBox.style.overflowY = 'auto'; // 设置信息框内容支持垂直滚动
infoBox.style.scrollbarWidth = 'none'; // 隐藏滚动条
infoBox.style.msOverflowStyle = 'none'; // IE 浏览器兼容
infoBox.style.MozOverflowStyle = '-moz-scrollbars-vertical'; // Firefox 浏览器兼容
</script>
</body>
</html>在这个示例中，我们创建了一个 Maptalks 地图和一个信息框。通过设置信息框的样式，使其支持垂直滚动。
以下代码亲测有效：
<!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>评论可见，请评论后查看内容，谢谢！！！
您阅读本篇文章共花了： 大家都在找：
maptalks：maptalks threejs
大家都在看：
发表评论