首页 / 浏览问题 / WebGIS / 问题详情
用iframe嵌套官网的demo,手机浏览器快速拖动地图bug
2EXP 2023年03月16日

大佬们,我用iframe嵌套官方的demo https://iclient.supermap.io/examples/openlayers/editor.html#turf_classificationAnalysis,在安卓手机浏览器中快读拖动地图后,地图莫名其妙全部错乱了,往上拖变放大,往下拖变缩小 之类的。
不用iframe就不会有问题

1个回答

您好,官网示例的编辑器和框架设计上主要考虑仅作为演示示例使用,

确实没有考量示例editor再嵌套至其它开发内容中。

和iframe有冲突的话,建议您可以尝试直接使用编辑器内本身的页面内容,

以确定您冲突的具体是editor.html还是turf_classificationAnalysis.html。

https://iclient.supermap.io/examples/openlayers/turf_classificationAnalysis.html

您可以下载完整版iserver,安装后启动的iserver是包括官网上iClient的这些示例内容的,

其中editor.html和turf_classificationAnalysis.html都是有的,您可以在您自己部署的iserver中修改代码,以实现您项目中的兼容使用。

希望可以帮助到您。

于丁
1
10,588EXP 2023年03月16日

感谢你的回答,我试着使用https://iclient.supermap.io/examples/openlayers/turf_classificationAnalysis.html 问题依然重现,


 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div style="width: 100%; height:100vh">

<iframe src="https://iclient.supermap.io/examples/openlayers/turf_classificationAnalysis.html" frameborder="0"

width="100%" allowfullscreen height="100%"></iframe>

</div>

</body>

</html>

我的项目需求是:我用H5做的一个地图功能页面,要用iframe嵌套在其他项目中,在安卓手机浏览上出现了以上问。
最初我怀疑是我的H5地图页面有问题,因此我试着用官网的一个地图页面用iframe嵌套,没想到问题依旧,所以我现在不知道问题出现在哪里
你好,我这边用你的代码,在pc端火狐开发版浏览器的pc浏览模式下、安卓浏览模式下,红米K30自带浏览器,iPhone14pro自带浏览器下,

测试上拖下托等都是正常移动,双指开闭才会缩放,都是正常的。

我这边可能建议您从具体的系统、厂商、浏览器和开发框架的环节来定位您使用iframe时的异常情况。

您也可以尝试在iframe试试直接初始化使用iclient的代码而不是html的话是否正常,

如果正常你可以从iframe引用html的角度排查一下。

测试视频:

链接:https://pan.baidu.com/s/1TZxaSFDBq4H-re8Vj1hAHw?pwd=qzky
提取码:qzky
--来自百度网盘超级会员V5的分享
你好,感谢您的回答,可能我没描述清楚,我用华为手机自带浏览器,小米手机自带浏览器,在地图上快速向下拖动地图就会重现问题

这问题的确困扰我们很久,非常希望能得到你们的指点,再次感谢!
你好 给你看下我拍的测试视频:百度网盘链接: https://pan.baidu.com/s/1pGdJ9Fi-X4oooTm5ONksCg  提取码: 2kmg
按上面的方法具体定位下导致出现的环节或者原因呢,我这边没有复现您的使用情况。
我这边只要是安卓手机 就会复现,麻烦您有时间的话看看我拍的视频,指点一下我是哪里出问题了

我这边已经看了您的视频,但是看了也没法猜到您代码过程中有什么问题,

只能给您测试排查思路,您这边根据您项目情况实际上手测测找到问题才好帮您解决。broken heart

你好,代码就是官方的demo

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
</head>

<body>
     <div style="width: 100%; height:100vh">
          <iframe src="https://iclient.supermap.io/examples/openlayers/turf_classificationAnalysis.html" frameborder="0"
               width="100%" allowfullscreen height="100%"></iframe>
     </div>
</body>

</html>

您这边私聊下我您的电话联系方式。
...