<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://unpkg.com/@antv/l7'></script>
<script src="./ceshi.js"></script>
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="mapcontainer">
<div id="map"></div>
</div>
<script>
const adaptor = new Adaptor({
designHeight: 1080,
designWidth: 1920,
querySelector: "#mapcontainer",
// extraSelectors: [".l7-popup", ".l7-popup-anchor-bottom", ".l7-popup-content", ".l7-popup-content__panel"],
});
const scene = new L7.Scene({
id: 'map',
map: new L7.GaodeMap({
style: 'dark',
zoom: 2
}),
});
scene.on('loaded', () => {
let point = new L7.PointLayer({}).source([{ lng: 87.53067, lat: 43.89701 }], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
}
})
.shape('simple')
.color('blue')
.size(12);
scene.addLayer(point);
const layerPopup = new L7.LayerPopup({
items: [
{
layer: point,
customContent: feature => `<div style="padding: 5px 15px;
color: #fff;
background: rgba(4,20,39,0.7);
border-radius: 4px;
border: 1px solid #0F75FA;">测试测试</div>`
},
],
trigger: 'click',
});
scene.addPopup(layerPopup);
})
</script>
</body>
</html>
如上图，popup的位置偏高。不知道作者有没有遇到过这种现象，有解决方案吗？
下面是demo，使用时把你的ts文件编译成js文件后引入就行