javascript - "map.getBounds()"结果在 leaflet.js 中聚焦输入表单后发生变化

标签 javascript android jquery-mobile cordova leaflet

我使用 leafletjs 和 jQueryMobile 开发基于 Phonegap 的 map Android 应用程序。 此应用程序有两个页面。第一页是 Mapview,第二页是由一些输入表单组成的首选项。

当我将输入表单(仅!)聚焦在第二页并转到第一页时, map 边界由于某种原因发生了变化。

例如。 改变前。西南与东北不同。

L.map.getBounds().toBBoxString();  // 135.42702913284302,34.68926290260606,135.42702913284302,34.68926290260606

在聚焦输入表单之后。西南与东北相同!

L.map.getBounds().toBBoxString();  // 135.42702913284302,34.68926290260606,135.4544949531555,34.70252981597828

有没有人遇到同样的问题? 我找不到为 map 设置边界的方法。

最佳答案

这是我假设发生的情况:

  1. 你聚焦输入框
  2. 输入字段的样式以某种方式触发 window.resize 事件
  3. 传单 map 大小无效
  4. 当您请求边界时,它会读取新的大小(因为旧的无效),因为 map 是隐藏的,所以它是零——大概是

那是因为 getBounds 调用:

getPixelBounds: function () {
    var topLeftPoint = this._getTopLeftPoint();
    return new L.Bounds(topLeftPoint, topLeftPoint.add(this.getSize()));
},

topLeftPoint 完好无损,但大小为 [0,0],您得到 NE = SW。

可能的解决方案:

一个。在转换到第二页之前缓存边界 B. 调查输入焦点触发窗口大小调整的原因

关于javascript - "map.getBounds()"结果在 leaflet.js 中聚焦输入表单后发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19682272/

相关文章:

performance - 寻找一种可靠的方法来测试移动设备上的 CSS 转换性能

javascript - 使用 jquery 在移动浏览器上点击重绘图表

javascript - 如何在 ajax 成功函数之外保存 var 值?

JavaScript 到 Coffeescript

javascript - 如何使用 JSON 服务器更新 ReactJS 中的数据

javascript - socket.io 客户端是否必须存在于全局范围内?

java - 为什么 findViewById() 会导致 relativeLayout 初始化命令崩溃?

java - 如何根据区域设置获取不同的字符串值?

android - React native + Axios 不会跨请求保留 cookie

javascript - 使用 Controller 初始化 Angular 服务的正确方法