新款 JavaScript 街景渲染器改进了渲染并提供了更好的移动支持

truthrudy

“街景”是 Google 地图最受欢迎的功能之一，可让用户探索和体验周边世界。世界各地的开发者使用 Google Maps JavaScript API 中的街景来使他们的 App 更独特、更有趣，给用户带来身临其境之感。

现在，通过在 Google Maps JavaScript API 中推出新款街景渲染器，我们进一步增强了街景功能，尤其是在移动设备上的体验。有关所做改进的详情，请继续阅读下文！

1. 显示效果更佳
过渡更平滑
现在，从街景中的某个位置过渡到另一个位置包含更多的动画帧，因此可更平滑地过渡至下一位置。在旧版渲染器中，过渡看起来像从某个位置跳转至另一个位置。


▲ 旧版渲染器   


▲ 新版渲染器

加载动画更流畅
旧版渲染器在加载新内容时重复图像，因而会导致卡顿现象。新版渲染器加载时使用低分辨率的图像，因此在街景中旋转图像时，动画显示更流畅。

▲ 旧版渲染器

▲ 新版渲染器

改进了对象建模
街景的对象在新版渲染器中看起来更好，因为其创建了考虑所有可能角度的 360 度模型。例如，这栋高楼在旧版渲染器中轮廓模糊，而在新版渲染器中则轮廓清晰。

▲ 旧版渲染器


▲ 新版渲染器

另一个示例：对于倾斜图像（例如陡峭山坡上的街道），新版渲染器将会更正对象使其垂直显示，而旧版渲染器则会倾斜显示对象。

▲ 旧版渲染器

▲ 新版渲染器

更好的移动支持
WebGL 图像
新版渲染器使用 WebGL（在支持的浏览器中），因而可提供更高的帧率和更好的渲染，尤其是在移动设备上。在移动设备上，旧版渲染器会显示图像的鱼眼投影，而 WebGL 则会呈现出看起来与现实一样的球面。例如，下面图像中的街道原本是笔直的，但旧版渲染器使其在移动设备上看起来是弯曲的。

▲ 旧版渲染器

▲ 新版渲染器

支持触控式操作
随着移动网页使用量的不断增加，用户期望能够随时随地使用所熟悉的触控式操作进行互动。在 Google 地图 Android 应用中可用的“捏拉缩放”和“双击执行”等触控式操作手势，现在通过新版渲染器也可用于移动设备。在旧版渲染器中，只能通过 +/- 按钮进行缩放，而且也只能通过单击地面上的箭头来移动。

移动设备上的运动跟踪功能
移动设备可让开发者为用户提供更自然的方式来探索应用程序并与之互动。我们在街景中启用了对设备方向事件的支持，因此移动设备上的用户只要移动手机即可在街景中查看四周。开发者也可以根据需要关闭此项功能。请参阅开发者文档获取详细信息，或在移动设备上打开文档链接查看运动跟踪实战案例。


更好的控件
X 前进
使用带有鼠标或触控板的桌面设备时，用户在光标位置可看到一个很小的 "X"，它表示选择前进时的下一个摄像头位置。箭头指示移动的方向。墙壁矩形标识出摄像头将指向的位置。

▲ 下一个图像目标

▲ 下一个中心图像目标

街道名称、标签和目标更清晰
现在，街道名称和标签与控件分离，因此消除了重叠问题，让从左至右和从右至左显示的语言显示更清晰。

▲ 旧版渲染器

▲ 新版渲染器

我们希望您在使用这款改进的街景新版渲染器时拥有愉悦体验！非常感谢开发者使用 Google Maps JavaScript API，并通过 issue tracker 提交反馈意见。获得开发者的反馈对我们持续改进产品至关重要，因此如果您有任何错误报告或功能请求，请告诉我们！

有关 Google Maps JavaScript API 中街景的详细信息，请参阅开发者文档。