如何使 Google 地图居中而不位于屏幕中心?

2023-12-03

我有一个基于 Google 地图(使用 gmap3)的网站,该网站有标记和其上方的浮动小部件,其中包含有关活动标记的文本。这个浮动小部件大约占据屏幕的一半。地图自动居中(或平移至)活动标记。

从上面可以看出,屏幕中央的活动标记非常靠近文本小部件的右侧(几乎覆盖了屏幕的所有左侧)。我想让它更宽松——比如说,不是在屏幕的中心,而是在左侧约 2/3,右侧约 1/3(当然,水平方向;垂直方向应该保持居中)。

换句话说,我想要以下内容:当选择新标记为活动标记时,地图应平移到该位置,即该标记距屏幕右侧约 1/3 的屏幕宽度。

更改地图中心的纬度不会有帮助,因为这应该适用于任何缩放级别。我需要类似“panTo(宽度:66%;高度:50%)”(当然,这不是真正的代码)。

先感谢您。

(       function($){
    var $et_main_map = $( '#et_main_map' );

    et_active_marker = null;

    $et_main_map.gmap3({
        map:{
            options:{
<?php
while ( have_posts() ) : the_post();
$et_location_lat = get_post_meta( get_the_ID(), '_et_listing_lat', true );
$et_location_lng = get_post_meta( get_the_ID(), '_et_listing_lng', true );

            if ( '' != $et_location_lat && '' != $et_location_lng )
                printf( 'center: [%s, %s],', $et_location_lat, $et_location_lng );

break;
endwhile;
rewind_posts();
?>

                            zoom: <?php
                        if ( is_home() || is_front_page() )
                            echo esc_js( et_get_option( 'explorable_homepage_zoom_level', 3 ) );
                        else
                            echo esc_js( et_get_option( 'explorable_default_zoom_level', 5 ) ); ?>,
                mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( et_get_option( 'explorable_map_type', 'Roadmap' ) ) ); ?>,
                mapTypeControl: false,
                mapTypeControlOptions: {
                    position : google.maps.ControlPosition.LEFT_CENTER,
                    style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                navigationControl: true,
                scrollwheel: false,
                streetViewControl: false,
                zoomControl: true,
                                    zoomControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_BOTTOM,
                                            style: google.maps.ZoomControlStyle.SMALL
                },
            }
        }
    });

您可以首先将地图以给定的 LatLng 为中心,然后使用panBy()应用偏移量:

 map.panBy(-Math.floor(map.getDiv().offsetWidth/6),0)

对于 gmap3,您可以使用 map-option 的 event-property 来应用它: 添加以下代码

        events:{
        idle:function(map){
            google.maps.event.clearListeners(map,'idle');
            map.panBy(-parseInt(this.width()/6),0);
         }
      },

就在之后

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

如何使 Google 地图居中而不位于屏幕中心? 的相关文章

  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 设置反向地理编码 Gmaps v.3 的语言

    现在有人如何设置反向地理编码 php 响应的语言吗 始终设置 en Here is the code code api key url http maps google com maps geo q 49 8411860 30 106658
  • 无法访问 com.google.android.gms.internal.zzbfm 的 zzbfm 类文件未找到

    我正在将我的 Android 应用程序项目从GCM to FCM 为此 我使用 Android Studio 中的 Firebase 助手工具 并遵循 Google 开发人员指南中的说明 一切都很顺利 并将我的应用程序代码更改为FCM根据助
  • 在 Google 地图中映射 400MB KML 数据 - 如何?

    Re 我有一个 400MB 大的 KML 文件 1 周的旅行和 5000 公里的记录 它已经去除了非必要的数据 压缩后的 GPX 文件大小约为 80MB 或 2 5MB KML 文件大约 30MB 我不确定有多少个航点 但肯定有数十万个 我
  • Google 地理编码——解析可能返回不同结果的地址组件

    我正在使用 Google 地图 V3 api 我正在提交地址搜索以返回正确的地理编码结果 包括地址 机构名称和纬度 经度 我的问题是地理编码器的响应可以采用不同的格式 它始终遵循相同的结构 但某些响应对地址组件数据结构使用不同的键 例如 某
  • 如何将动画应用到 GMSMarker

    我正在通过使用适用于 iOS V1 1 0 的 Google Maps SDK 将 iOS 地图迁移到 google 地图来更改我的应用程序 并且我尝试在添加 删除时对标记进行动画处理 但我在与此相关的文档中没有找到任何建议 请建议我如何在
  • 谷歌地图在网络应用程序中离线

    如何下载谷歌地图中的所有图像以在网络应用程序中永久使用离线访问 我可以使用以下命令执行在线操作 src maps googleapis com maps api js sensor false language en 但我需要通过在线下载所
  • 在单页应用程序上重用 Google Maps API 实例

    假设我有一个单页应用程序 Angular JS 应用程序 并且我在元素 id 上绘制一个 Google 地图实例googleMap var mapInstance new google maps Map document getElemen
  • 从后台恢复后,Flutter GoogleMap 为空白

    我遇到以下问题 我的 Flutter 应用程序使用 GoogleMap 地图最初加载得很好 但是 如果我将应用程序置于后台并稍后恢复 地图将保持空白 Google 徽标仍然显示 就像未指定 API 密钥时发生的情况一样 我的多边形叠加层也不
  • 更新 Google 地图流量层而无需重新加载页面

    我的页面中嵌入了 Google 地图 我使用 initMap js 函数来初始化地图 function initMap var map new google maps Map document getElementById t map zo
  • android-如何在谷歌地图上将标记的位置显示为地址

    我已经尝试过 commonsware googlemapsv2 教程 特别是在地图上拖动标记 但现在另一个问题困扰着我 问题是如何将标记的当前位置显示为地图下方或上方的地址 字符串 这是我使用的代码 public class MainAct
  • 平滑 GPS 跟踪的路线坐标

    我有一些记录的坐标数据 不幸的是 他们似乎不太好 他们有时会跳过地图 所以现在我正在寻找一些扁平化或过滤算法 使路线看起来更真实 目前 我唯一的过滤器是计算一秒钟内 公交车 汽车或步行 行驶的最大可能米数 并将它们与坐标进行比较 扔掉那些在
  • 在对话框中第二次渲染时渲染 Google 地图时出现问题

    我有一个我构建的网站 90 是 jQuery 和 ajax 所以我想通过单击按钮来渲染不同的地图和方向 而无需刷新页面 第一次渲染时一切正常 如下图所示 但是当我重新加载或更改为不同的时 我得到这个 我认为它仍在用点渲染地图 只是画布是不正
  • IONIC 2 Google 地图标记点击事件

    我正在尝试使用此代码从数据库中获取所有标记 但问题是 当我单击标记时 我总是从数据库中获取最后一项 当 alert record id 弹出窗口始终显示每个标记的最后一个项目 我想在单击每个标记时显示它们的 id loadMarker th
  • React-native-maps 限制平移区域

    有没有办法将地图限制在特定区域 以便平移和缩放包含在该区域内 而外部的所有内容都被锁定 我想限制用户可以在地图上看到的区域 我通过react native maps使用谷歌地图https github com react community
  • 如果路线有 Tolls Google Maps API xml 请求,则返回

    在标准谷歌地图方向搜索中 在编写方向之前会提供咨询 说明该路线有收费站 如果没有通行费 则不会显示任何咨询信息 我有一个谷歌地图 API 请求 该请求显示地图 其中包含从 1 个家庭地址到 1 个工作地址的旅行距离和持续时间 我很难找到在哪
  • 设置删除标记时的缩放级别

    使用 javascript 谷歌地图 api 我目前已将其设置为删除制造商 当我添加像这样的位置时 我将其设置为 function addLocation map location var point new GLatLng locatio
  • 自定义标记在某些设备上不显示(Google 地图 Android SDK)

    我在 Android 应用程序上使用自定义标记运行 Google Maps SDK 在我们的测试手机 S3 S5 和 DROID 上一切正常 但是 当我在 Nexus 5 硬件上运行该应用程序时 一种类型的自定义标记不再显示在地图上 虽然标
  • Google-Maps v3:如何根据缩放级别更改地图样式?

    我正在使用新的 Google 地图 v3 样式地图 我想根据缩放级别更改地图的样式 我有以下伪代码 如何根据缩放级别更改我的地图样式 var myOptions zoom zoom center latlng disableDefaultU
  • 如何将相机居中以使标记位于屏幕底部? (谷歌地图API V2 Android)

    单击标记时 相机的默认行为是将其置于屏幕中央 但由于我通常在信息窗口中有很长的文本描述 因此实际更改相机位置以使标记位于屏幕的底部会更方便 屏幕 使信息窗口位于屏幕中央 我认为我应该能够通过重写 onMarkerClick 函数来做到这一点

随机推荐

  • 将文件夹的文件夹中的文件重命名为其父文件夹?

    我有一批文件夹 其名称基于日期 每个文件夹都有一个文件夹 其中的文件名全部相同 有没有办法重命名文件 使它们根据它们所在的目录结构 显示的是基于日期的父文件夹 第一个文件夹 而变得唯一 user date 1 2 2019 ABC 0001
  • 在 MS Access 2010 中使用正则表达式替换列

    ms access 2010中有一个名为sample的表 仅包含一列body 类型 文本
  • 完美转发与 const 引用

    我有一个简单的问题我不明白 int solution int a int b int main int a b std cin gt gt a gt gt b std cout lt lt solution std forward
  • Git:删除超过 1 年的提交

    我有一个 Web 应用程序 使用 git 不仅可以管理源代码控制 还可以部署更改 我将更改推送到 github 上的远程存储库 并且我的网络服务器有一个 webhook 然后根据这些更改进行更新 现在我注意到我的本地 git 存储库大约有
  • 我使用字典是否错误,看起来太慢了

    我使用了 VS 分析器并注意到程序大约 40 的时间花费在下面的行中 我在用着title1 and color1因为 Visual Studio 或 Resharper 建议这样做 下面的代码是否存在性能问题 Dictionary
  • codeigniter 调整图像大小并创建缩略图

    您好 根据 ci 文档 您可以使用 image lib 调整图像大小 并且有一些选项建议我们可以从该图像创建其他缩略图 create thumb FALSE TRUE FALSE boolean Tells the image proces
  • 链接时可以混合静态库和共享库吗?

    我有一个 C 项目 它生成十个可执行文件 我希望将所有这些文件静态链接 我面临的问题是这些可执行文件之一使用第三方库 其中只有共享对象版本可用 如果我通过了 static标记为 gcc ld 会错误说它找不到有问题的库 我认为它正在寻找 a
  • Spring MVC:如何重定向到有错误的页面?

    我试图让我的控制器重定向到带有自定义错误消息的页面 RequestMapping method RequestMethod POST public String processSubmit Valid Voter voter Binding
  • 如何制作深度常量指针

    假设我想用 C 表示二叉树 通常 我想要一个Node像这样的结构 struct Node Node left Node right 这里我使用结构体和原始指针只是为了简单起见 我知道我应该使用智能指针进行内存管理 这种表述有一个问题 我永远
  • Ruby 查看 csv 数据

    我从 csv 文件中获取一些数据 还有如何选择 csv 中的前 20 个数据 例如 A B C D E F 还有方法 def common uploader require csv arr CSV read Rails public pat
  • 如何从 Dataproc 上的检查点重新启动 Spark Streaming 作业?

    这是后续dataproc 上的 Spark 流抛出 FileNotFoundException 在过去的几周里 不确定从什么时候开始 重新启动 Spark 流作业 即使使用 kill dataproc agent 技巧也会抛出此异常 17
  • ORA-02070: 数据库不支持此上下文

    我有一个查询 例如 INSERT INTO sid rem dev db sid select sid from v session 现在 当我执行这个查询时 我得到 ORA 02070 database does not support
  • Google Translate API 和 Firebase Firestore 正在互相残杀

    我们正在尝试编写一个 Google Cloud Function 它从 Google Translate API 获取翻译 然后将结果写入我们的 Firebase Firestore 数据库 每个人单独工作 但一起工作就没有任何效果 换句话
  • FFmpeg filter_complex concat 仅给出作物的第一个输入

    在使用具有多个输入和多个输出的 concat 和crop 时 我遇到了问题 这是 ffmpeg y i input 1 mp4 i input 2 mp4 i input 3 mp4 i input 4 mp4 filter complex
  • 推送到 Heroku 时出错:找不到模块“node-linux-x64/package.json”

    将全栈 Javascript 应用程序部署到 Heroku 时 我收到以下错误 Error Cannot find module node linux x64 package json 还有一个语法错误 但我不认为这是原因 我是 Mac 用
  • 黑莓 - 如何用图像占据一个完整的按钮

    我编写了 BlackBerry 代码来将图像添加到 ButtonField 我希望整个按钮都被图像占据 但图像没有完全显示在 ButtonField 上 按钮的顶部 左侧和右侧都有很多边距 我尝试使用 cellpadding 但它不起作用
  • 使用 D3 的 XHR / Post 请求

    我正在研究如何使用极其强大的功能来发出 POST 请求D3 我完全可以推荐它用于数据可视化 并发现xhr2分支D3 的作者目前正在致力于 xhr POST 请求 和其他请求类型 支持 看起来这是一个全新的功能 因为合并请求来自昨天 2012
  • Function.createCallback 在 FireFox 中无法正确传递上下文

    我发现了 MS AJAX 库与 FireFox 交互方式中的一个错误 但也许我只是做错了 我有一个看起来像这样的脚本 dowork value some value currentRetry 0 Try to connect at leas
  • 设置 OpenJDK JVM 故障转储位置

    我正在使用 OpenJDK 8 并且正在尝试找出设置 JVM 二进制转储位置的方法 这是我的 java version 的输出 openjdk版本 1 8 0 232 OpenJDK 运行时环境 AdoptOpenJDK build 1 8
  • 如何使 Google 地图居中而不位于屏幕中心?

    我有一个基于 Google 地图 使用 gmap3 的网站 该网站有标记和其上方的浮动小部件 其中包含有关活动标记的文本 这个浮动小部件大约占据屏幕的一半 地图自动居中 或平移至 活动标记 从上面可以看出 屏幕中央的活动标记非常靠近文本小部