fix(地图): 处理腾讯地图移动端无法滑动页面的问题,以及提升tooltip层级以避免被地图覆盖

This commit is contained in:
jianneng-fit2cloud
2026-03-17 18:31:52 +08:00
committed by jianneng-fit2cloud
parent e89059d88b
commit a2ed12930f
3 changed files with 30 additions and 9 deletions

View File

@@ -155,6 +155,11 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
chart.container = container
configCarouselTooltip(chart, symbolicLayer, symbolicLayer.sourceOption.data, scene)
qqMapRendered(scene)
// 提高tooltip层级避免被地图覆盖
const containerElement = document.getElementById(container)
containerElement
?.querySelectorAll<HTMLElement>('.l7-marker-container')
.forEach(el => (el.style.zIndex = '3'))
})
symbolicLayer.on('click', ev => {
const data = ev.feature

View File

@@ -1261,14 +1261,14 @@ export function configL7Zoom(
// 当地图未加载完成时无法配置控制项需要监听loaded事件
if (!scene.loaded) {
scene.once('loaded', () => {
updateMapStatusOption(mapKey.mapType, scene, false)
updateMapStatusOption(chart, mapKey.mapType, scene, false)
})
} else {
updateMapStatusOption(mapKey.mapType, scene, false)
updateMapStatusOption(chart, mapKey.mapType, scene, false)
}
return
}
updateMapStatusOption(mapKey.mapType, scene, true)
updateMapStatusOption(chart, mapKey.mapType, scene, true)
if (!scene?.getControlByName('zoom')) {
if (!scene.map) {
scene.once('loaded', () => {
@@ -2519,7 +2519,7 @@ export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (da
* @param scene
* @param enable
*/
function updateMapStatusOption(mapType: string, scene: Scene, enable = false) {
function updateMapStatusOption(chart: Chart, mapType: string, scene: Scene, enable = false) {
switch (mapType) {
case 'tianditu':
if (enable) {
@@ -2557,9 +2557,14 @@ function updateMapStatusOption(mapType: string, scene: Scene, enable = false) {
}
// 当交互关闭时,画布容器不响应事件,避免与地图交互冲突
if (!enable && isMobile()) {
const sceneEl = scene
let sceneEl = scene
.getServiceContainer?.()
.sceneService?.getSceneContainer() as HTMLElement | null
sceneEl && (sceneEl.style.pointerEvents = 'auto')
if (mapType === 'qq') {
sceneEl = document.getElementById(chart.container)
sceneEl && (sceneEl.style.pointerEvents = 'none')
} else {
sceneEl && (sceneEl.style.pointerEvents = 'auto')
}
}
}

View File

@@ -422,6 +422,7 @@ let mapL7Timer: number
const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, callback) => {
mapL7Timer && clearTimeout(mapL7Timer)
mapL7Timer = setTimeout(async () => {
chart.container = containerId
myChart = await chartView.drawChart({
chartObj: myChart,
container: containerId,
@@ -846,9 +847,19 @@ watch(
newVal => {
if (ONLINE_CHARTS.includes(view.value.type) && isMobile() && shouldHideZoom()) {
const containerDiv = document.getElementById(containerId)
containerDiv?.querySelectorAll<HTMLElement>('.l7-scene').forEach(el => {
el.style.pointerEvents = newVal ? 'none' : 'auto'
})
if (!containerDiv) return
// 仅有腾讯地图配置该参数
const isQQMap = !!containerDiv.style.pointerEvents
const containerEvents = newVal ? 'auto' : 'none'
const sceneEvents = isQQMap ? containerEvents : newVal ? 'none' : 'auto'
if (isQQMap) {
containerDiv.style.pointerEvents = containerEvents
}
containerDiv
.querySelectorAll<HTMLElement>('.l7-scene')
.forEach(el => (el.style.pointerEvents = sceneEvents))
}
}
)