在谷歌地图javascript api中 - 如何移动地图而不是标记

Posted 2023-03-28

【中文标题】在谷歌地图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 进行测试所以当您在任何地方单击地图时 - 标记（没有混蛋！）留在原地并且地图移动到底部的那个标记 - 谢谢！