fengMap 自定义dom 偏离实际位置;缩放时飘出地图所在区域

news2024/9/23 13:19:35

目录

一、问题

二、原因及解决方法

 三、总结


一、问题

1.前人写了一份代码,很奇怪。使用 new fengmap.FMCompositeMarker添加的复合覆盖物位置是正常的,缩放的时候也是正常的,仍然处于地图内部但是new fengmap.FMDomMarker添加的自定义dom 标注就是有问题呀,同一个点标注出来的位置和 new fengmap.FMCompositeMarker标注出来的位置不一样,缩放的时候还直接飘出了地图所在区域。

具体情况如下图所示:左边自定义dom,右边是复合覆盖物,但是我给的点是一模一样的。

二、原因及解决方法

1.我刚开始一直以为 fengMap自带的bug,还想着要自己给dom加一个偏移量让dom显示的位置正确。

2.但是猛然发现 fengMap官网上 的示例https://developer.fengmap.com/fmAPI/?url=Marker%2FFMDomMarker是正确的呀!!!!

位置及缩放都没有问题呀。所以我看的bug只能是前人的代码有问题 …………

3.到底是为什么呢?仔细对比了两个代码。发现唯一的不同点就在于:为什么我这个dom这么奇怪,怎么会这么宽呢??????

看文档Fengmap JavaScript SDK v3.0.10 API才发现原来  有一个domWidth可以设置属性,于是找到了前人写的代码果然设置了 domWidth:1200px。改成我想要的宽度184px或许就好了!!!!!!

 改成184px虽然很近了,但是感觉还是有问题,这怎么看都不像重合的样子呀!!!!

 

 

4.为什么还这样呀????没办法只能看dom元素了,仔细看了一下发现竟然给每个自定义dom还设置了68px的左外边距,不知道前人是怎么想的。但是检查的时候又看着像 右外边距@--@不知道为啥呀。

取消右边距后终于正常了!!!!!! 撒花完结了!!!!!!

 

 三、总结

1.fengMap插件中发现自定义dom位置不对,或者缩放时飘出地图,可以检查一下: 自定义dom的domWidth和domHeight是否设置的有问题;还有自定义的样式是否有问题。——总之是样式有问题,需要仔细找一找。

2.fengMap bug排查解决方法:

   1)看到问题不要慌张呀,冷静,看看你的问题官网示例有没有。如果有,则很有可能是 fengMap api自带的问题(那就要想办法规避);如果没有,则就是你自己的代码有问题,从自己的代码入手。

   2)检查自己的代码,看出问题修改即可。检查不出问题,就要结合官网的示例和自己的代码一起检查。检查的方面主要有:语法;用法;样式等。

3.太难了,我今天太激动了,所以花了很长时间抱怨,遇到问题一定要冷静下来先!!!

4.因fengMap使用及详细教程都较少,bug记录更少,特此记录,希望对你有启发!

5.关于那个实际加了 margin-left,却看着像是加了 margin-right的问题,我也不太清楚是怎么回事。如有大佬知道,欢迎指正,非常感谢!

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/383111.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx 负载均衡服务失败场景

nginx可以配置负载均衡,我们可以通过配置实现nginx负载均衡。这里部署了两个服务producter-one和producter-one2。 upstream proxyproducter-one {server producter-one:8080 weight1;server producter-one2:8080 weight1;}# 访问其他服务server {listen 9090…

Netty学习(三):Netty线程模型

〇、前言网络编程的基本线程模型,详见:Netty学习(二):线程模型一、工作原理简图Netty主要基于主从 Reactors 多线程模型(如下图) 做了一定的改进,其中主从Reactor 多线程模型有多个R…

ServerSocket的构造方法

在开发TCP程序时,首先需要创建服务器端程序。JDK的java.net包中提供了一个ServerSocket娄,该类的实例对象可以实现一个服务器端的程序。通过查阅API文档可知,ServerSocket类提供了多个构造方法,接下来就对ServerSocket的构造方法进…

Pycharm配置QGIS环境

版本信息:QGIS: 3.22.16Pycharm:2022.3.2 (Community Edition)在QGIS官网下载安装包,下载稳定版本即可。配置步骤:安装完成后,使用Pycharm新建工程Python编译器选择之前配置好的编译器环境选择左侧第一个Vi…

YOLOv8训练自定义数据集(超详细)

借鉴 https://blog.csdn.net/qq_40716944/article/details/128648001一、准备训练环境安装 requirements.txt下载:https://raw.githubusercontent.com/ultralytics/ultralytics/main/requirements.txt然后在你 目录下执行pip install -r requirements.txt它的 requi…

【字符串】leetcode28. 实现 strStr()(C/C++/Java/Python/Js)

leetcode28. 实现 strStr() 1 题目2 KMP2.1 什么是KMP?2.2 KMP有什么用?2.3 什么是前缀表?2.4 最长公共前后缀2.5 为什么一定要用前缀表?2.6 如何计算前缀表2.7 前缀表与next数组2.8 使用next数组来匹配2.9…

2022 年度_职业项目总结_Java技术点归纳

Java技术点归纳目录概述需求:设计思路实现思路分析1.Structs 元工程改造2.个贷子系统开发3.架构的迭代开发,升级,部署,参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,fu…

学编程的 4 大阶段,你到哪了?

大家好,我是阅黑马学生无数的播妞……通过观察黑马学生的学习状态,播妞总结了他们来黑马后的四个学习状态,可以说,只要跨过这四个阶段,走向辉煌的编程人生就是必然的事情。阶段一:一窍不通这个阶段的学生&a…

2023初级会计详细学习计划打卡表!自律逆袭,一次上岸!

2023年初级会计职称考试报名时间:2月7日-28日考试时间:5月13日—17日给大家整理了《经济法基础》和《初级会计实务》两科超实用的学习打卡表重要程度、难易度、易错点、要求掌握内容、章节估分等都全部总结在一起,一目了然!为什么…

rk3288-android8-IR-mouse

IR问题: mouse按键使用不了 然后排查: 1.排查上报 ir_key6{ rockchip,usercode <0xbf00>;rockchip,key_table <0xff KEY_POWER>,<0xfe KEY_MUTE>, <0xfd KEY_1>, <0xfc KEY_2>, <0xfb KEY_3>, <0xfa KEY_4>, <0xf9 KEY_5>…

JavaEE进阶第六课:SpringBoot ⽇志⽂件

上篇文章介绍了SpringBoot配置文件&#xff0c;这篇文章我们将会介绍SpringBoot ⽇志⽂件 荔枝1.日志有什么用2.自定义日志输出2.1获取程序日志对象2.2使用相关方法输出日志2.3日志级别2.3.1日志级别的作用2.3.2日志级别如何设置2.4日志格式3.持久化日志4.更简单的日志输出4.1使…

【移动端表格组件】uniapp简单实现H5,小程序,APP多端兼容表格功能,复制即用,简单易懂【详细注释版本】

前言&#xff1a; 由于最近需要做移动端的项目 有个pc端的后台系统里面需要移一部分页面过来 而里面就有很多的表格&#xff0c;我就开始惯例网上先找前人栽的树&#xff0c;我好乘凉 然后找了一圈发现&#xff0c;不管是主流的移动端ui库或者网上自己写的帖子&#xff0c;或者…

224. 基本计算器

224. 基本计算器给你一个字符串表达式 s &#xff0c;请你实现一个基本计算器来计算并返回它的值。注意:不允许使用任何将字符串作为数学表达式计算的内置函数&#xff0c;比如 eval() 。 示例 1&#xff1a;输入&#xff1a;s "1 1"输出&#xff1a;2示例 2&#…

【Pygame实战】变异狗大战:据说是最近还不错的小游戏,这一个个玩到表情崩坏,点开即玩,赶紧来~(Python代码搞笑版本)

前言 只有你想不到&#xff0c;没有我找不到写不了的好游戏&#xff01; 哈喽。我是你们的栗子同学啦~ 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝白嫖源码福利&#xff0c;请移步至CSDN社区或文末公众hao即可免费。 今天小编去了我朋友家里玩儿&#xff0c…

ExSwin-Unet 论文研读

ExSwin-Unet摘要1 引言2 方法2.1 基于窗口的注意力块2.2 外部注意力块2.3 不平衡的 Unet 架构2.4 自适应加权调整2.5 双重损失函数3 实验结果3.1 数据集3.2 实现细节3.3 与 SOTA 方法的比较3.4 消融研究4 讨论和限制5 结论数据集来源&#xff1a; https://feta.grand-challenge…

图扑 Web SCADA 智慧制硅厂,打造新时代制硅工业

前言 我国目前是全球最大的工业硅生产国、消费国和贸易国&#xff0c;且未来该产业的主要增量也将来源于我国。绿色低碳发展已成为全球大趋势和国际社会的共识&#xff0c;随着我国“双碳”目标的推进&#xff0c;光伏产业链快速发展&#xff0c;在光伏装机需求的带动下&#…

武汉凯迪正大KD305系列智能数字绝缘电阻测试仪

一、概述 KD305系列智能数字绝缘电阻测试仪采用嵌入式工业单片机实时操作系统&#xff0c;数字模拟指针与数字段码显示结合&#xff0c;该系列表具有多种电压输出等级&#xff08;500V、1000V、2500V、5000V、10000V&#xff09;、容量大、抗干扰强、模拟指针与数字同步显示、交…

数据结构考研习题精选

&#xff11; A假设比较&#xff54;次&#xff0c;由于换或不换&#xff0c;则必然有&#xff12;&#xff3e;&#xff54;种可能。又设有&#xff4e;个关键字&#xff0c;&#xff4e;&#xff01;排列组合&#xff0c;则必然有&#xff12;&#xff3e;&#xff54;&…

vue-element-admin执行npm install时的一些报错。

文章目录1. 首先在gitee上拉取的中文版2. 执行npm install的一些报错3. 参考文章1. 首先在gitee上拉取的中文版 git clone -b i18n https://gitee.com/panjiachen/vue-element-admin.git 2. 执行npm install的一些报错 npm install Please make sure you have the correct acc…

跨境电商平台,亚马逊、eBay、Shopee……哪个好?

2023一开始&#xff0c;随着各项利好政策的出台&#xff0c;中国跨境电商正在重新步入最好的时代。一些跨境电商企业纷纷开启上市热潮&#xff0c;身边许多人也跃跃欲试想转行跨境电商。专业数据显示&#xff0c;接下来将会有更多的跨境企业走向资本化的道路&#xff0c;借助资…