如何像优步一样在 Google 地图上添加 3d 对象作为标记

Posted 2023-04-15

【中文标题】如何像优步一样在 Google 地图上添加 3d 对象作为标记

【英文标题】：How can I add a 3d object as a marker on Google Maps like Uber does

【发布时间】：2017-04-19 21:07:21

【问题描述】：

我想添加一个 3d 标记，以便像 Uber 一样在地图上显示汽车，但我找不到任何有关在 ios 版 Google Maps SDK 上添加 3d 对象的信息。

不胜感激。

显然没有人看到 OP 和我所看到的，所以这里是 video 一辆 Uber 汽车转弯 90 度。逐帧播放，您会发现这不是简单的图像旋转。优步要么为每辆车做了大约 360 个角度的麻烦，要么它真的是一个 3D 模型。对每辆车进行 360 度全景拍摄对我来说似乎很愚蠢。

【问题讨论】：

首先，Uber 没有使用任何 3D 对象作为标记，它只是在汽车图像上带有阴影颜色的图像，所以您可以在图像中使用它。

你确定你看过最新的版本吗？ link

是的，我看过最新版本的 Uber，我确信那是一张带有阴影效果的图片。

他们是否使用多个图像并随着旋转的变化而改变图像？

@CodeChanger 所以有 360 张非常类别的图像？你在说什么，伙计？真的吗？

【参考方案1】：

据我所知，他们没有使用 3D 对象。他们也没有在 400 张不同角度的汽车图像之间制作动画。他们混合了旋转图像资源，并在大约 50-70 个不同角度的汽车图像之间制作动画。这种错觉是完美的，因为它看起来确实像是他们使用了 3D 汽车模型！

看看这张 Uber 汽车转弯的 GIF (Dropbox link)：

我们可以清楚地看到，阴影和汽车的视角并没有像汽车的旋转那样频繁地更新。

在这里，我以不同的角度叠加了 2 张汽车图像，但使用了相同的汽车图像：

我们可以看到地图旋转了约 5 度，但汽车图像非常清晰，因为它没有改变，只是旋转了。

【讨论】：

那个慢动作 GIF 非常有用并且证实了你的理论。谢谢！

基于什么图像被旋转？

@Farhad 这不是问题所在

@FelixLapalme 但它是相对的，如果我们在谈论多个图像的透视，那么不同的透视如何在视图中呈现它们自己？我的意思是有很多理论可以制造这种幻觉。不过我并没有说你的错，你的方法很有效，但它并没有解释观点是如何实现的。

所以@FelixLapalme 你能帮忙实现这个动画吗？

【参考方案2】：

Uber 只是 released a blog post documenting this。

看起来车辆是在 3D 软件中建模的，然后为应用导出了描绘不同角度的图像资源。根据车辆在地图上的位置及其行驶方向，使用不同的资产。

【参考方案3】：

首先，如果您指的是不是 3D 对象（虽然可以创建一个，但浪费时间）它们只是在 Photoshop 或 Illustrator 中创建的 3D 图像（大多数情况下）具有 3D 透视图（它也是视网膜优化的，这就是它看起来非常清晰的原因）。

您看到汽车旋转的原因是因为图像被固定到的UIImageView 旋转（主要使用CABasicAnimation）使用 3D 设备位置的计算基础（用于运行应用程序的相同技术）跟踪您的位置等），您可以使用 Core Location 检索该数据。

这是一个过程，但非常可行。祝你好运！

【讨论】：

请在原始问题中查看我的编辑。这不是简单的轮换：dropbox.com/s/sngka80y99c9kh3/uber-cropped.mov?dl=0

它仍然是一个旋转，由用户（司机）手机罗盘度数计算。就像我说的，您可以根据需要创建 3D 对象（浪费时间），但这显然是视网膜图像。为了回答你的“每辆车的轮换是愚蠢的”，这不是，因为他们使用像 Redis 这样的服务器来存储这种类型的数据只是很短的一段时间（可能是 2-3 秒）然后它被删除了，就是这样内存缓存数据库制作完成。

您所描述的是旧的 Uber 应用程序是如何显示车辆图像的。如果您仔细查看我在上面发布的视频，您会发现车辆的 3D 透视图随角度而变化。这不仅仅是轮换。除了旋转汽车之外，他们还在改变图像以显示新的视角，或者它是一个 3D 对象，这就是我想要弄清楚的。我不敢相信这个答案得到了 10 票赞成，因为它完全缺少图像不只是旋转的基本细节！

是的，我真的不明白为什么人们在这里没有看到这个问题并继续做出同样的解释......

@samvermette 我明白你现在的意思了。嗯，它是一个 3D 对象，可能是使用 SceneKit 创建并放置在视图中的。就像我说的那样，仍然可以制作 3D 对象。但旋转仍然使用驱动罗盘度数。

【参考方案4】：

谢谢所有答案都是有效的。

如果你愿意，你可以看到视频正在运行，它是如何工作的

您可以生成精灵表（大约 60 个）图块

我如何实现它和你需要的工具

3d 源汽车模型。

搅拌机，使用路径动画椭圆动画相机。

摄像头在汽车上下左右旋转

使用搅拌器生成的精灵渲染 3d 标记，角度使用位置更新时的方位变化。

您的车辆需要渲染以支持大多数屏幕，因此每个图块的基本尺寸为 64 像素，我根据屏幕的 dpi 进行缩放

结果实现：

https://twitter.com/ronfravi/status/1133226618024022016?s=09

【讨论】：

你好 Ronald，你能提供更多关于你是如何做到的细节或代码 sn-p 吗？

嘿，ronald 可以这么好心地分享这段代码。这对像我这样的许多开发人员来说非常有帮助。谢谢

【参考方案5】：

我相信一对标记图像，一个是真正的标记，另一个是较暗的模糊阴影，可以以更便宜的方式实现这一目的。将阴影标记放在标记下方，将 X 和 Y 轴移动到您认为阴影会适当放置的位置，最后同时移动它们并旋转它们（在网络版本上，您可能需要单独的旋转图像）时间应该能够[重新]创造幻觉。

正如@Felix Lapalme 已经解释得再简单不过了，我不再深入解释它。

【参考方案6】：

查看我的仓库 我用了一个dea模型，根据heading变量转动 https://github.com/hilalalhakani/HHMarker

【参考方案7】：

我在 Xamarin 中通过在 web 视图中渲染 three.js 然后将图像缓冲区直接发送到标记而不是将其绘制到屏幕来实现这一点。只花了几天时间，对于我的用例来说，它是必需的，因为我希望司机能够改变汽车的颜色和种类，但如果这不是你需要的功能，你最好只使用渲染图像序列。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案8】：

如果您想将图像旋转为标记。想要显示一个移动的物体可以使用 .git 图像。这对你很有帮助。

斯威夫特 3

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)

//Rotate a marker
let degrees = 90.0
let london = GMSMarker(position: position)
london.title = "London"

//Customize the marker image
london.icon = UIImage(named: "YourGifImageName")
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

欲了解更多信息Please check here