谷歌地图 | 3D 地图新功能:开发更简单,体验更丰富

devtools/2024/10/20 11:45:35/

今年早些时候在 Google I/O 大会上推出了地图 JavaScript API 中的逼真 3D 地图。从那时起,谷歌地图一直受到大家对 3D 地图的热烈反响,并从中汲取了大量灵感。9月25日,谷歌地图宣布实验性 3D 地图迎来了重大更新,这将使开发者更轻松地构建沉浸式且引人入胜的地图体验。

借助 JavaScript 3D 地图的新功能套件,开发者将拥有更多工具来优化 3D 开发流程,为用户提供直观流畅的体验,并进一步定制现实世界地图。

接下来跟随 Cloud Ace,一起感受 JavaScript 3D 地图酷炫的新功能

一、更直观的探索体验

流畅直观的导航对于 3D 探索体验至关重要。因此,Google 地图在 3D 界面中直接集成了直观的地图探索控件。通过地图探索控件,用户可以更轻松地平移、缩放和旋转 3D 地图,无缝地探索世界,而无需编写复杂的代码。

这项更新不仅简化了用户入门过程,还让开发者可以更专注于应用程序的核心功能。

地图探索控件示例

二、自定义标记,丰富 3D 场景

除了多边形和折线之外,现在还可以使用可自定义的标记向 3D 地图添加更多视觉元素,让 3D 地图更加生动形象。

通过标记自定义选项,开发者可以控制品牌的风格,确保 3D 地图中的视觉清晰度,并允许用户交互和参与,给用户提供更沉浸式的体验。例如:

  • 更改默认图钉的颜色和图标:将图钉图标替换为品牌的图像或符号

  • 使用拉伸线在视觉上锚定标记

  • 格式化碰撞和遮挡行为,优化用户视角

  • 通过点击事件触发特定操作,如显示自定义 UI 或启动相机动画

自定义标记突出显示澳大利亚悉尼的特色景点

三、预设相机路径,实现动画效果

通过引入预设的“飞向”和“飞绕”相机路径,简化了创建动态、电影级地图体验的过程。这些现成的动画选项省去了复杂的相机脚本编写,使开发者能轻松实现相机运动的自动化,从而生成流畅的导览、围绕兴趣点的环绕展示或平滑的过渡效果。丰富的预设选项满足了不同场景的需求,极大地提高了开发效率。

用户可以像看电影一样,通过预设的相机运动,让地图动起来!比如绕着喜欢的景点转一圈,或者平滑地从一个地方飞到另一个地方,发现更多地图上的细节和趣味点。

结合飞入和飞绕相机功能以实现无缝地图动画

四、3D 模型打造更酷地图

展示自定义 3D 元素,用 3D 模型可视化地理数据,并可以直接在3D地图中渲染gITF资产,创建更生动、更具交互性的3D地图

定制的 3D 飞机模拟抵达澳大利亚因斯布鲁克的情景

注:3D飞机由 Google 的 Poly 制作 [CC-BY] 

五、POI 位置服务

Google Maps Platform 的 3D 地图功能与 Places API 深度集成,后者囊括了全球超过 2.5亿 个企业和兴趣点(POI),并保持每日更新。

通过扩展点击交互功能,开发者可以为底图上的 POI 和标签添加事件监听器。利用这一事件,您可以整合 Google Maps Platform 的其他 API,如 Place Details,在 3D 地图中直接呈现更丰富的位置信息、用户评价和图片。

用户只需要点击地图上的兴趣点,就可以获取更详细的信息,比如店铺的营业时间、评价等。

使用 Maps JavaScript API 中的照片级逼真 3D 地图创建交互式 3D 地图

虚拟探索波士顿标志性的自由之路

六、3D 地图的未来

随着技术的不断发展,3D 地图的应用场景将会越来越广泛:

  • 元宇宙: 3D 地图可以作为元宇宙的基础,为用户提供一个虚拟的数字世界。

  • 城市规划: 城市规划师可以利用 3D 地图进行城市规划和模拟。

  • 游戏开发: 游戏开发者可以利用 3D 地图打造更加真实的虚拟世界。

本文介绍的新功能现在在 Maps JavaScript API 的逼真 3D 地图中已经可用,未来3D 地图将会变得更加智能、更加个性化,无论是作为普通用户,还是开发者,我们都能从中找到乐趣和商机。

如果您想了解更多 JavaScript 3D 地图的新功能套件或者想立即集成到您的应用中,请立即联系谷歌地图一级代理商 Cloud Ace云一

电话:0755-26410916 邮箱:zixun@cloud-ace.com


http://www.ppmy.cn/devtools/120857.html

相关文章

Spring MVC 常用注解

目录 基础概念 常用注解介绍 基础概念 1、MVC :代表一种软件架构设计思想,通俗的理解:客户端发送请求到后台服务器的Controller(C),控制器调用Model(M)来处理业务逻辑,处理完成后,返回处理后的数据到Vie…

Python画笔案例-074 绘制轮子走了

1、绘制轮子走了 通过 python 的turtle 库绘制 轮子走了,如下图: 2、实现代码 绘制轮子走了,以下为实现代码: """轮子走了.py """ import time import turtle def draw_polygon(number,length):

中国身份证号码校验

题目描述 第二届河南省最美教师评选开始了,每一位同学都可以投票选出你支持的人选,但是为了防止刷票,必须通过身份验证才可投票。负责投票平台后台的老大爷希望你能帮他验证身份证号的合法性,防止那些熊孩子随意刷票,…

python画图|自制渐变柱状图

在前述学习过程中,我们已经通过官网学习了如何绘制渐变的柱状图及其背景。 掌握一门技能的最佳检验方式就是通过实战,因此,本文尝试做一些渐变设计。 前述学习记录可查看链接: Python画图|渐变背景-CSDN博客 【1】柱状图渐变 …

机器学习基本上就是特征工程——《特征工程训练营》

作为机器学习流程的一部分,特征工程是对数据进行转化以提高机器学习性能的艺术。 当前有关机器学习的讨论主要以模型为中心。更应该关注以数据为中心的机器学习方法。 本书旨在介绍流行的特征工程技术,讨论何时以及如何运用这些技术的框架。我发现&…

技术成神之路:设计模式(十九)桥接模式

介绍 桥接模式(Bridge Pattern)是一种结构型设计模式,通过将抽象部分与它的实现部分分离,使它们都能够独立地变化。它的核心思想是将接口与实现解耦,从而使得两者可以独立地变化。 1.定义 桥接模式将抽象部分与它的实现…

【系统架构设计师】经典论文:轮软件三层架构设计

更多内容请见: 备考系统架构设计师-核心总结目录 文章目录 摘要正文总结摘要 本人于 2022 年 1 月参与了中石化 XX 油田 XX 采油厂“用电管理系统”的项目建设,该系统建设目标是实现分单位、分线路、分系统评价、优化、考核,全面提升采油厂用 电管理水平。在该项目组中我担…

vue自定义div弹窗打开失败

在写自定义div弹窗的时候,实现类似el-dlaig打开关闭的效果。 1. showDialog的时候 div怎么也打不开,并且页面中也没有插入那块dom; 2. dialogVisible默认是true的时候是能正常展示div的 解决办法:类似el-dlalog的appen-to-body属性…