如何使用 Leaflet API 更改地图的位置中心?

2023-12-24

我的地图(Mapbox)占据了网站的整个背景,因此中心位于网站的中间。但用户的地图焦点位于右侧,因为我的内容与左侧的地图重叠。当传单抓取位置时,它是从地图的中心开始的,但是如果我可以将其设置为从网站右三分之一的中心抓取位置,这样用户就不会居中了目标上的地图与网站左半部分的内容接壤。

有没有办法可以设置地图传单 API 的中心或位置焦点?

这是我目前的设置方式,

mapOptions: {
        maxZoom: 18,
        zoomControl: false,
        worldCopyJump: true 
},

createMap: function() {
        Map.map =  L.map('map', Map.mapOptions);
        Map.layer = L.mapbox.tileLayer(Map.mapID, {
                unloadInvisibleTiles: true,
        }).addTo(Map.map);              
        Map.map.locate({setView: true});
        Map.map.addControl(L.mapbox.geocoderControl(Map.mapID));
        new L.Control.Zoom({ position: 'topright' }).addTo(Map.map);
},

您可以使用以下组合panBy() and getSize()使地图偏移覆盖层的宽度。

这是一个可以帮助您入门的片段:

// Calculate the offset
var offset = map.getSize().x*0.15;
// Then move the map
map.panBy(new L.Point(-offset, 0), {animate: false});

在我的示例中,我的叠加层占地图宽度的 33%。因此,我获取地图区域的大小,然后乘以 0.15(这是基于一些实验来了解最佳偏移量是多少)并使用panBy()偏移地图中心。

这是一个完整的例子 http://jsfiddle.net/brettdewoody/WWBgh/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Leaflet API 更改地图的位置中心? 的相关文章

  • readOGR (rgdal) 无法从 XML 获取多边形名称

    我正在尝试导入英格兰 CCG 边界的 KML 地图 此处提供 200Kb http geoportal statistics gov uk datasets 1bc1e6a77cdd4b3a9a0458b64af1ade4 4 kml 进入
  • 传单 GeoJSON 点*后面*多边形

    我有两个传单 geojson 层 它们都有点和多边形特征 我希望能够在地图上对它们进行排序 但是当我今天这样做时 尝试通过按特定顺序添加它们来排序它们 使用 BringToBack bringToFront 等 两个图层中的点图标都位于所有
  • 如何让传单地图画布具有 100% 的高度?

    我的传单画布目前如下所示 高度为 700 像素 不过我希望它的高度为 100 以便占据整个空白区域 高度 100 在地图画布的 CSS 属性中不起作用 我找到了一些解决方案 但它们只适用于谷歌地图 有没有人有解决方案 即使这只是一个解决方法
  • 在重新激活 WiFi/移动网络之前,服务中的 Android 位置侦听器无法工作

    我的位置侦听器工作正常 收集数据没有任何问题 但有时它不收集任何数据 我此时必须关闭并重新启动我的位置提供程序 重新启动可以解决问题 但是 这可能不是用户期望做的最好的事情 当我使用 GPS 作为提供商时 没有问题 位置侦听器在服务中工作
  • R 中的县等值区域地图的阿拉斯加和夏威夷格式不正确

    我正在尝试将美国的 Choropleth 地图格式化为特定颜色 不幸的是 当使用scale fill brewer改变颜色 只有 48 个州这样做 夏威夷和阿拉斯加没有 是否可以知道我是否也可以将着色应用到夏威夷和阿拉斯加 library
  • 传单位置过滤器示例和可拖动可调整大小的矩形区域在地图上选择

    我需要在地图上选择一个矩形区域并识别属于该区域的标记 理想情况下 矩形应该是可拖动和可调整大小的 我对地图并不太挑剔 Google Mapbox 或 Leaflet 都可以正常工作 我找到了传单的位置过滤器 https github com
  • 删除 ggplot 地图/choropleth 中的边框线

    我想删除 ggplot 中生成的等值线区域之间的线 我的问题是由一张非常大的地图引起的 其中包含非常非常小的区域 人口普查区块组 这些区域数量如此之多 以至于鉴于边界的密度 不可能看到填充形状的颜色 我在 Mac 上使用更新后的 RStud
  • leaflet + gMapCatcher-更改zxy模板

    我在用着leaflet由 gMapCatcher 生成的图块 那里的文件名完全不同 例如 传单中的缩放级别 17 是 gMapCatcher 的级别 0 我需要更改 url 模板 http s somedomain com blabla z
  • 自定义 OpenLayers 控件

    如何轻松自定义 OpenLayers 地图控件 或者至少 如何最小化控件的高度 谢谢 附言 有 CSS 覆盖吗 您可以对任何 openLayers 控件进行子类化 我刚刚通过对 PanZoomBar panZoomBar js 进行子类化
  • 如何使用延迟位置 iOS 6?

    我正在尝试使用新的 iOS 6 延迟位置更新功能 但不断收到此错误 didFinishDeferredUpdatesWithError Error Domain kCLErrorDomain Code 11 操作无法完成 kCLErrorD
  • 加拿大人口普查地图分区 R

    我对 R 和映射非常陌生 我想创建某些数据的映射 我有一组名为 D Montreal 的数据 显示 2010 年前往蒙特利尔的加拿大人口普查部门游客来自哪个国家 我想使用此数据创建一个地图 以显示有多少人来自不同地区 也许可以通过对根据人数
  • 如何使用 LeafLe 创建商店地图

    我希望创建一个可以交互的地图 我发现的最好的选择是传单 问题是我没有找到任何资源来解释如何创建自己的地图 我希望创建一个商场地图 用户可以在其中看到所有商店 喷泉 我怎样才能做到这一点 最好的起点是传单示例页面 http leafletjs
  • 使用 MKPolyline 在地图上绘制用户路线

    我对 Objective c 还很陌生 在我的应用程序中 我试图将用户采取的路线绘制到地图上 到目前为止 这是我仅获取用户当前位置的内容 import StartCycleViewController h import CrumbPath
  • R Leaflet:添加多边形时传递 popupOptions。

    Within addPolygons 有一个popup参数就像addPopups 功能 区别 我认为 是当弹出窗口创建时addPolygons 可以单击多边形内的任意位置来触发弹出窗口 但是如果addPopups 被使用 单个lng and
  • leaflet.draw 垃圾按钮删除所有多边形并保存

    使用javascript 如何更改leaflet draw 垃圾桶 按钮以删除所有已绘制并自动保存的多边形 下面是我实现的代码 但它是一个完整的黑客 它会删除活动多边形 但是在删除对象后 当我单击 垃圾箱 图标时 控制台中开始出现错误Not
  • 如何将 BOOST_FOREACH 与两个 std::map 一起使用?

    我的代码基本上如下所示 std map
  • 向图像添加坐标,以用作 R 中的 Leaflet、Shiny 和 Shinydashboard 包中的地图

    我计划使用 Leaflet Shiny 和 Shinydashboard 沿着以下很棒的路线创建一个带有医院 OHS 事件标记的交互式地图交互式地图和直方图模板 http shiny rstudio com gallery superzip
  • 如何创建在 React-Native 中检测自动位置的地图

    我已经在react native中创建了地图 参考https github com lelandrichardson react native maps https github com lelandrichardson react nat
  • 如何通过我的 ios 应用程序的指示打开苹果地图应用程序

    我的目标是从 ios 应用程序打开带有方向的地图应用程序 我可以打开地图应用程序 但它没有显示方向 我编写的代码如下 NSString mystr NSString alloc initWithFormat http maps apple
  • R Leaflet Legend:colorBin-删除中断之间的小数

    我正在使用 Leaflet 库在 R 中创建交互式 HTML 地图 传说中采用的是colorBin用于创建将数据分为 6 个类别的方法 使用min values and max values 我已经定义了美国社区调查收入数据的特定范围可能落

随机推荐

  • 应该 rspec 匹配器 :on => :create

    我正在使用一些 Shoulda rspec 匹配器来测试我的模型 其中之一是 describe Issue do it should not allow value test for priority end 我的问题是模型中的验证如下所示
  • C# 中的条件运算符和返回类型[重复]

    这个问题在这里已经有答案了 可能的重复 为什么 null 需要在这里进行显式类型转换 https stackoverflow com questions 2608878 why does null need an explicit type
  • 使用 UI 的 Airflow s3 连接

    我一直在尝试使用 Airflow 来安排 DAG 其中一个 DAG 包含一项从 s3 存储桶加载数据的任务 出于上述目的 我需要设置 s3 连接 但气流提供的 UI 并不那么直观 http pythonhosted org airflow
  • 哪种算法是查找素数最快的算法?

    使用 C 找出素数最快的算法是什么 我已经使用了 sieve 算法 但我仍然希望它更快 非常快的实施阿特金筛 http en wikipedia org wiki Sieve of Atkin是丹 伯恩斯坦的primegen http cr
  • 在 Ruby on Rails 的模型中使用“current_user”

    我正在使用 Devise 它在助手中提供了 current user 方法 以便我可以在视图和控制器中使用 但是现在我想访问模型中的 current user 方法 这是我现在控制器中的内容 def create set email add
  • 为什么 `Array(0,1,2) == Array(0,1,2)` 没有返回预期结果?

    据我了解 Scala 的 定义两个对象的自然平等 我期望Array 0 1 2 Array 0 1 2 比较自然平等 例如 检查与另一个数组的相应元素比较时数组的所有元素是否返回 true 人们告诉我 Scala 的Array只是一个Jav
  • 为什么 C# 中的类型推断不适用于动态对象和泛型方法?

    我正在开发一个项目 该项目使用 C 泛型与动态关键字相结合来实现一个简单的 prototxt Caffe 文件解析器 该解析器基于 Google protocol buffer 项目的 proto2 语法 解析器使用非常简单的语法来读取 p
  • 将域模型映射到视图模型

    我从一个非常相似的点开始 领域实体 DTO 和视图模型 https stackoverflow com questions 5330172 domain entities dto and view models 建议使用 DTO 在域模型和
  • 如何使用相对路径访问不属于任何项目/程序集的图像[重复]

    这个问题已经存在了 我正在为 帝国时代 2 DE 制作一个模组 我的目标是从新 UI 的目录访问旧的纹理文件 文件结构如下 C Program Files x86 Steam steamapps common AoE2DE 是包含exe的游
  • 重构 JSON 数据

    目前我有一个 json 文件 其中存储了多个数据 如下所示 name Adelphi University supp Yes E WS ed u00a0 online 40 ea 12 1 mid No rd Rolling recs Ye
  • Doctrine 2.0 引导程序?

    好的 我已经在文件夹层次结构中找到了 Doctrine php 文件 如下所示 includes Setup php Doctrine Common DBAL ORM Symfony Doctrine php 我的 setup php 有以
  • 在课堂上使用碰撞列表

    我创建了一个类来创建矩形并将它们放入列表中 我不想让它们碰撞 所以我使用 collidelist 但它不起作用 矩形仍在碰撞 我还希望矩形在击中特定点时向下移动并更改 x 位置 我可以做到这一点 但我不确定它是否会阻止碰撞列表工作 请查看下
  • 我如何知道 lambda 表达式何时为空

    我需要以编程方式检查 lambda 表达式中的嵌套属性 函数结果是否为 null 问题在于 null 可能位于任何嵌套子属性中 例子 功能是 public static bool HasNull
  • Oracle DB 表中的第二高值 [重复]

    这个问题在这里已经有答案了 根据表格 USERS user name email balance 如何创建一个查询 返回最多的第二高用户余额高效的 way 我成功地通过查询获取了此记录 但不是通过有效的方式 SELECT FROM SELE
  • 每月重新加载 servlet 一次

    如何每月重新加载一次 servlet 我们得到了一些每月会改变一次的数据 这些数据是给servlet的 但是我们不需要将这些数据保存到DB中 而是希望将其做成一个每月更换一次的配置文件 怎么办我做这个 我知道servlet的生命周期策略是由
  • 如何使用 SQLAlchemy + postgreSQL 减少连接数?

    我正在开发heroku使用他们的Postgres开发计划的附加组件 其连接限制为20 我是新来的python这可能是微不足道的 但我发现很难在不导致OperationalError OperationalError FATAL too ma
  • Chart.js 无法创建图表:无法从给定项目获取上下文

    我从未进入过节点 所以我很确定我在这里做了一些严重错误的事情 因为我根本无法通过谷歌搜索找到任何信息 我有一个 django 网站 我想要一个 JS 图表库 我选择了 Chart js 我安装并喜欢这些文档 但之后我不确定该怎么做 所以我尝
  • 监视同步 XMLHttpRequest 调用的进度

    在客户端 我有一个文件放置区 HTML5 文件 API 用户可以在其中放置应上传到服务器的多个文件 对于每个文件 都会创建一个新的 XMLHttpRequest 对象 并将文件异步发送到服务器 我正在通过以下方式监控进度progressxh
  • 将值传递给 Javascript 时出现引号问题

    我正在使用像 myPage td a href Edit a td where row name 其值中有引号 它坏了 我如何从 php 端和 js 端解决这个问题 row name 是来自数据库的值 它的价值就像pradeep s and
  • 如何使用 Leaflet API 更改地图的位置中心?

    我的地图 Mapbox 占据了网站的整个背景 因此中心位于网站的中间 但用户的地图焦点位于右侧 因为我的内容与左侧的地图重叠 当传单抓取位置时 它是从地图的中心开始的 但是如果我可以将其设置为从网站右三分之一的中心抓取位置 这样用户就不会居