关键词：

【中文标题】在谷歌地图javascript api中 - 如何移动地图而不是标记【英文标题】：In google maps javascript api - how to move map not marker 【发布时间】：2022-01-24 05:56:38 【问题描述】：

目前我有一个小项目需要使标记静态并将地图移动到地图上的标记显示 - 我希望它有任何意义 -

如何移动地图而不是标记 - 就像我说的那样，标记不能移动，但地图需要在位置改变时移动到标记 - 标记也显示在地图底部，以便为标记上方的其他事件腾出空间，例如路径显示等 -

已经完成的是，当汽车移动时它会观察 gps - 然后告诉标记移动到该 gps 作为当前位置，然后平移到地图底部 - 这使得标记在其位置改变时在地图底部抖动- 所以我想如果我通过将标记放置在地图上方的 div 中并通过 css 样式固定它来保持标记静态 - 所以它始终保持在同一个地方 - 但这是错误的，因为当有人拖动时它不能随地图一起移动用手指绘制地图 - 所以这不可能是正确的解决方案 - 除非我遗漏了什么，否则你对这个困境的解决方案是什么 -

【问题讨论】：

【参考方案1】：

要实现你想要的，你需要在正确的轴上旋转地图，找到地图中心的位置，最后center地图在正确的位置。

1 - 旋转地图

在您的情况下（我假设您希望汽车始终面向用户位置前方的道路）您需要在居中之前旋转地图，否则地图始终朝向北方，并且当汽车向其他方向移动（例如向南）。在这种情况下，视点方向错误，用户看不到即将到来的道路。

您可以在文档中找到示例 here。基本上你需要使用setHeading() 方法。 gmap 上的旋转并不容易（见this post）。

2 - 找到地图的中心

要查找地图中心的更新位置，您需要检索始终位于标记固定位置上方相同距离（以地图容器的像素为单位）的点的 latLng 位置。使用方法fromLatLngToPoint() 和fromPointToLatLng() 将位置从地图检索到现实世界，反之亦然（有关详细信息，请参阅getProjection()）。

示例：

您的地图以 1000*1000 像素显示，您选择的标记的底部位置位于左侧 500 像素和顶部 950 像素处。如果要在不改变标记位置的情况下移动地图中心，则需要在标记上方 450px 处找到点的 latLng 位置。

function findMapCenter(map, markerLatLng) 
    // need this to adjust from the actual zoom on the map
    let scale = Math.pow(2, map.getZoom());
    // position in pixel x.y from the container
    let markerWorldCoordinate = map.getProjection().fromLatLngToPoint(markerLatLng);
    // calcul of the position of the center
    let centerWorldCoordinate = new google.maps.Point(
        markerWorldCoordinate.x,
        markerWorldCoordinate.y + (450/scale) // 450 because in my exemple is from 450px at the top of the marker
    );
    // return latLng of the center point of the map
    return map.getProjection().fromPointToLatLng(centerWorldCoordinate);

3 - 将地图设置在正确的位置

使用setCenter() 方法将地图居中于选定的纬度位置。

let marker; // = config of your marker
let gMap = new google.maps.Map(document.getElementById('map'));
update(lat:MARKER_LATITUDE, lng:MARKER_LONGITUDE);

// call this every time you want to update
function update(markerNewLatLng)
    // ... first step : rotate the map if you need to
    // then update marker position
    marker.setPosition(markerNewLatLng);
    // center the map
    gMap.setCenter(findMapCenter(gmap, markerNewLatLng));

【讨论】：

所以你的意思是，如果我有一个动态的 LatLng，它会根据汽车运动（成像汽车标记）而变化，并且它位于地图的底部 - 那么标记将保持在原位没有上下颠簸，地图无缝平移到汽车标记所在的中心 - 我重复汽车标记需要位于地图底部 - 因此汽车标记所在的地图中心 - 我有一个感觉在以动态方式设置地图中心后发生这种情况可能还不够 - 只是对您的回复进行头脑风暴 - 顺便谢谢！ 我修改了我的帖子，使其更加具体。我希望我能理解你的问题，它可以帮助你。 为了将标记粘贴在底部，必须将标记从 450 更改为 -450 - 除此之外就像一个魅力 - 我什至继续使用 map-listerner-onclick 进行测试所以当您在任何地方单击地图时 - 标记（没有混蛋！）留在原地并且地图移动到底部的那个标记 - 谢谢！

如何使用javascript在谷歌地图中的多个标记之间绘制路线图

】如何使用javascript在谷歌地图中的多个标记之间绘制路线图【英文标题】：HowtodrawRoutemapbetweenmultiplemarkersingooglemapsusingjavascript【发布时间】：2018-01-0217:24:06【问题描述】：我使用谷歌地图API开发了地图。标记通过适当的标签可... 查看详情

如何使用坐标数组在谷歌地图 API 中绘制多边形？

...rdinates?【发布时间】：2016-07-2213:27:44【问题描述】：我是JavaScript新手，我正在尝试使用googlemapAPI来绘制多边形。google.maps.Polygons函数中的默认路径接受以下格式的JSON：vartrianglecoords=[la 查看详情

如何在 asp.net 页面中使用 javascript 在谷歌地图上显示点？

】如何在asp.net页面中使用javascript在谷歌地图上显示点？【英文标题】：Howtoshowpointonthegooglemapwithjavascriptinasp.netpage?【发布时间】：2015-07-2014:26:08【问题描述】：我正在为从asp按钮显示获取点编写此代码并在地图上显示该点：<s... 查看详情

如何在谷歌地图API中找到最近的城市

】如何在谷歌地图API中找到最近的城市【英文标题】：HowtofindthenearestcitiesinGooglemapAPI【发布时间】：2012-07-2512:14:40【问题描述】：我想找到我为example提供的澳大利亚最近的城市。在此查看示例。我尝试使用GoogleAPI但没有用。我... 查看详情

如何使用 api 在谷歌地图中仅显示一个国家或特定区域？

】如何使用api在谷歌地图中仅显示一个国家或特定区域？【英文标题】：HowtodisplayonlyonecountryoraspecificareainGooglemapsusingtheapi?【发布时间】：2010-10-1713:13:25【问题描述】：我在一个项目中使用谷歌地图，我想在我的地图窗口中只显... 查看详情

如何在颤振中使用 json API 在谷歌地图中添加标记？

】如何在颤振中使用jsonAPI在谷歌地图中添加标记？【英文标题】：HowtoaddmarkerinthegooglemapusingjsonAPIinflutter?【发布时间】：2021-07-1304:07:01【问题描述】：我正在尝试使用http请求基于jsonAPI(EventData)向我的地图添加标记。当我运行我... 查看详情

如何在谷歌地图 api V3 中偏移中心点

】如何在谷歌地图apiV3中偏移中心点【英文标题】：HowtooffsetthecenterpointinGooglemapsapiV3【发布时间】：2012-05-2606:29:57【问题描述】：我有一个谷歌地图，其中半透明面板覆盖了部分区域。我想调整地图的中心点以考虑地图中部分被... 查看详情

如何使用谷歌 API 客户端在谷歌地图 Android 中显示我的当前位置

】如何使用谷歌API客户端在谷歌地图Android中显示我的当前位置【英文标题】：HowtoshowmycurrentlocationinGoogleMapAndroidusinggoogleAPIclient【发布时间】：2016-02-1719:44:20【问题描述】：我想在地图上显示我的位置并放大它。我想使用GoolgeAPIC... 查看详情

如何删除不相关的道路并在谷歌地图中显示所需的路线？对应的API是啥？

】如何删除不相关的道路并在谷歌地图中显示所需的路线？对应的API是啥？【英文标题】：HowtodeleteirrelaventroadsandshowdesiredrouteinGoogleMaps?What\'sthecorrespondingAPI?如何删除不相关的道路并在谷歌地图中显示所需的路线？对应的API是什... 查看详情

如何在谷歌地图API中获取高速公路和道路的纬度和经度

】如何在谷歌地图API中获取高速公路和道路的纬度和经度【英文标题】：HowtogetLatitudeandLongitudeofhighwaysandroadsinGooglemapsAPI【发布时间】：2016-04-0421:27:14【问题描述】：在我的公司，我们使用Google地图API对地址进行地理编码以获取... 查看详情

如何在谷歌地图api中创建多个信息窗口

】如何在谷歌地图api中创建多个信息窗口【英文标题】：Howtocreatemultipleinfowindowingooglemapapi【发布时间】：2013-05-1210:16:14【问题描述】：我在地图中创建了3个标记，其数据来自json。但是当我点击一个标记并尝试打开信息窗口时，... 查看详情

如何在谷歌地图中设置缩放级别

】如何在谷歌地图中设置缩放级别【英文标题】：Howtosetzoomlevelingooglemap【发布时间】：2012-07-1208:16:16【问题描述】：这是我编写的代码，用于通过提供纬度和经度向谷歌地图添加标记。问题是我得到了一个高度放大的谷歌地图... 查看详情

如何在谷歌地图 ios sdk 中显示多条折线

】如何在谷歌地图iossdk中显示多条折线【英文标题】：Howtoshowmultiplepolylinesingooglemapsiossdk【发布时间】：2017-01-1909:42:09【问题描述】：这里我用来获取折线的API是https://maps.googleapis.com/maps/api/directions/json?origin=xxxxxxx&destination=xxxx... 查看详情

如何使用我的 JSON 数据在谷歌地图 API 上创建标记？

】如何使用我的JSON数据在谷歌地图API上创建标记？【英文标题】：HowcanIusemyJSONdatatocreatemarkersonagooglemapsAPI?【发布时间】：2021-06-1501:12:00【问题描述】：我有一堆坐标存储在一个JSON对象中，用作一些谷歌地图标记的信息。我正在... 查看详情

如何在谷歌地图 api 中计算从 1 个位置到许多其他位置的距离？ [复制]

】如何在谷歌地图api中计算从1个位置到许多其他位置的距离？[复制]【英文标题】：Howtocalculatethedistancefrom1locationtomanyotherlocationsinthegooglemapsapi?[duplicate]【发布时间】：2019-11-1316:45:20【问题描述】：用我制作的谷歌地图计算两点... 查看详情

在谷歌地图javascript下拍摄特定区域的快照

】在谷歌地图javascript下拍摄特定区域的快照【英文标题】：Takesnapshotofaspecificareaundergooglemapjavascript【发布时间】：2018-05-2415:58:30【问题描述】：我正在尝试拍摄由谷歌地图上绘制的矩形包围的区域的快照。是否可以拍摄矩形下... 查看详情

如何拉取用户的当前位置并显示在谷歌地图 api 上？ [复制]

】如何拉取用户的当前位置并显示在谷歌地图api上？[复制]【英文标题】：Howtopulluser\'scurrentlocationanddisplayongooglemapapi?[duplicate]【发布时间】：2018-01-2217:57:46【问题描述】：所以我要完成两件事1)拉取用户当前位置2）然后在谷歌地... 查看详情

Django：在谷歌地图的 javascript 中使用模板标签

】Django：在谷歌地图的javascript中使用模板标签【英文标题】：Django:usingtemplatetagsinsideofjavascriptforGoogleMaps【发布时间】：2017-08-2203:06:03【问题描述】：我正在尝试在我的javascript中使用模板标签使其动态化并根据发送的地址加载地... 查看详情