如何使 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 Places API:如何使用多种类型?

    我需要一个返回评级 照片 开放 关闭时间等的 POI API 我认为 Google Places API 似乎可以满足我的要求 但我在过滤方面遇到了一些麻烦 我想使用多种类型的自动完成功能过滤 这是我所拥有的 var map var sel
  • Google Maps API V3:捕捉到另一个多边形的节点

    我正在绘制相邻且共享边界的多边形 看下面的示例图片 如果我要为蒙大拿州绘制一个多边形 我希望能够单击爱达荷州多边形的节点以获得相同的边界部分 以确保边界不会重叠或有孔 但是 节点不允许直接单击它们 如果我使节点不可见 那么准确性会恶化 并且
  • 从 Google 地图导出 geoJSON 数据

    是否有内置支持或任何可导出的库geoJSON数据来自google maps Data层或google maps Data Feature or google maps Data Geometry甚至使用Marker Polyline and
  • Google 地图信息窗口根据内部内容调整大小

    我正在使用此方法创建自定义信息窗口 UIView mapView GMSMapView mapView markerInfoWindow GMSMarker marker基于UIStoryboard使用自动布局 我预计一些内部视图将被调整大
  • Google 地图 api V3 - 从查询结果动态添加多个标记

    我正在尝试在页面上设置一个地图 并在其下方设置几个链接 单击这些链接时 将动态查询我的数据库并在地图上输出结果集 我花了很多时间在谷歌上搜索这个 但找不到我想要的东西 我已经使用 AJAX 返回纬度和经度坐标了 但是当尝试在地图上创建标记时
  • 谷歌地图返回空指针异常

    当我尝试在片段上显示地图时 它返回空指针异常 我已将所有内容添加到清单中的每个权限中 我正在附加片段文件 XML 文件和日志目录 Chatffragment java public class ChatFragment extends Fr
  • 在 iOS 和 Android 版 Google 地图上突出显示国家/地区

    我正在尝试在地图上突出显示国家 地区 对于iOS我发现很少有演示 Demo1 http sugartin info 2012 02 13 adding overlays on mkmapview using mkpolygon mkpoly
  • 谷歌地图 API 的替代品 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的答案
  • Google 地图自动完成 - 最多 3 个字符类型

    我已经实现了带有搜索框的谷歌地图 它允许用户通过搜索来选择地址 在该搜索框中 即使我输入 1 个字符 它也会进行搜索 我希望用户至少输入 3 个字符 否则它不应该进行搜索 My JS Fiddle is http jsfiddle net
  • Google Maps API v3 在地图加载后不会禁用滚轮

    我正在网站上实现谷歌地图 一切都工作得很好 除了地图加载后我似乎无法禁用滚轮 如果我在地图加载之前将选项设置为scrollwheel false 则滚轮将被禁用 但如果我稍后尝试执行此操作 我有一个启用 禁用滚轮的复选框 以下是我在页面加载
  • GoogleMaps iOS SDK 1.5 无法加载

    所以我开始研究使用 GoogleMaps iOS SDK 我按照说明进行操作 在控制台中启用适用于 iOS 的 Google Maps SDK 设置 API 密钥并添加捆绑 ID 我使用演示项目 Google Supplies 更新了常量
  • Google Geolocation API - 使用经度和纬度获取文本框中的地址?

    我注意到很多关于如何使用基于 IP 地址的 Google 地理定位查找您的位置的信息 但我想知道是否以及如何使用此服务来输入位置 经度和纬度 并获取当前地址 或至少是一个城市 州 我想用 C 来完成此操作 但我可以使用任何语言 有什么建议吗
  • 使用 Selenium 放置嵌入的谷歌地图标记

    我有一个 asp net 网站 作为向导的一部分 它使用嵌入式谷歌地图通过单击地图放置标记来选择位置 我如何使用 Selenium 实现自动化 我特别尝试过 ClickAt 双击 鼠标按下 鼠标按下 在所有情况下 传递地图 div id 作
  • 如何在 Android 应用程序中启用谷歌地图导航

    I have two points on google map first one is the source and second is the destination I have the route between these poi
  • 在 Google 地图中映射 400MB KML 数据 - 如何?

    Re 我有一个 400MB 大的 KML 文件 1 周的旅行和 5000 公里的记录 它已经去除了非必要的数据 压缩后的 GPX 文件大小约为 80MB 或 2 5MB KML 文件大约 30MB 我不确定有多少个航点 但肯定有数十万个 我
  • 如何从谷歌地图中的纬度和经度获取地址位置? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 所以我有纬度和经度就像44 4647452 and 7 3553838 我需要获得如下地址 米兰 意大利 str 肯尼迪 89 我怎样才能
  • 地理编码服务与 gMap 搜索之间的差异结果

    我想获取此地址的纬度和经度 Boulevard de la Marne Zone industrielle COULOMMIERS 77120 France 我将 api 添加到我的页面 当我使用 gmaps 时 结果很好 但是当我想通过
  • 如何测试 google.maps.Geocoder?

    你好 我正在尝试编写一个 简单 测试来检查反应类组件状态更改 具体来说 我正在测试如果 Google 成功对我发送的某些字符串 地址 进行地理编码 lat 纬度 和 lng 经度 状态是否会发生变化 这是我想测试的示例 i e the la
  • 如何在Android中读取谷歌地图的kmz文件

    我有 KMZ 文件 我想解析该 KMZ 文件 以便我可以读取我尝试使用的该文件的数据KmlLayer但没有从中得到任何帮助这是我的代码 InputStream inputStream new FileInputStream path Kml
  • 如何使用 Google Maps for Android V2 处理地图移动结束?

    我想在地图中心更改后立即对地址进行地理编码 如何使用新的 Android 版 Google 地图 V2 处理地图移动 我说的是用户用手指拖动地图的情况 查看新的地图 API Override public void onMapReady G

随机推荐

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

    我有一批文件夹 其名称基于日期 每个文件夹都有一个文件夹 其中的文件名全部相同 有没有办法重命名文件 使它们根据它们所在的目录结构 显示的是基于日期的父文件夹 第一个文件夹 而变得唯一 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 的网站 该网站有标记和其上方的浮动小部件 其中包含有关活动标记的文本 这个浮动小部件大约占据屏幕的一半 地图自动居中 或平移至 活动标记 从上面可以看出 屏幕中央的活动标记非常靠近文本小部