Gmail谷歌邮箱手机版

0
0
在微信中打开

谷歌地图代理 | 使用 HTML 和矢量模式 API 更轻松地创建 Web 地图

谷歌地图代理 | 使用 HTML 和矢量模式 API 更轻松地创建 Web 地图 Cloud Ace 云一
2025-05-16
744
导读:在过去的一年里,谷歌对 Maps JavaScript API 进行了两项重要更新,以便更轻松地采用我们最新、最好的地图:HTML 地图和矢量模式 API。今天谷歌地图亚太区最大代理商之一的Cloud Ace云一为大家介绍一下更新的具体内容。

在过去的一年里,谷歌对 Maps JavaScript API 进行了两项重要更新,以便更轻松地采用我们最新、最好的地图:HTML 地图和矢量模式 API。今天谷歌地图亚太区最大代理商之一的Cloud Ace云一为大家介绍一下更新的具体内容。

HTML 地图

谷歌宣布首套基于 HTML 的 API,它们由基于标准的提供支持。现在,您只需几行代码(包括在 React Web 应用中内联到 JSX)即可将交互式地图嵌入到兼容 HTML 的环境中。使用 元素即可快速上手<gmp-map>。

这是一个基本的例子:

&lt;script async src="https://maps.googleapis.com/maps/api/js?libraries=maps&amp;key=YOUR_KEY&amp;loading=async"&gt;&lt;/script&gt;<font></font>
&lt;gmp-map<font></font>
center="37.4220656,-122.0840897"<font></font>
zoom="10"<font></font>
&gt;<font></font>
&lt;/gmp-map&gt;<font></font>

地图上的其他内容(例如高级标记)也可以直接通过 HTML 添加:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=maps,marker&key=YOUR_KEY&loading=async"></script>
<gmp-map
center="37.4220656,-122.0840897"
zoom="10"
map-id="DEMO_MAP_ID"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA">
</gmp-advanced-marker>
</gmp-map>

欲了解更多信息,请参阅指南和代码示例。您还可以在我们的参考文档中 查看完整的

为了保持现有 的向后兼容性google.maps.Map,<gmp-map>我们引入了一个新google.maps.MapElement类。虽然目前并非所有地图功能都可通过 HTML 实现,但请,以帮助我们确定未来开发的优先级。 的所有地图功能<gmp-map> 仍然可以通过 JavaScript 的 属性访问。

注意:请确保<script>您的页面上只包含一次 Maps JavaScript API 标签,或者使用。

矢量模式 API

新<gmp-map>元素默认为矢量渲染,以便您可以“开箱即用”获得最新的地图技术。

我们还简化了升级现有地图代码以利用矢量渲染的操作。只需renderingType: "VECTOR"在地图实例中添加 ` ` 即可,如下例所示:

const map = new google.maps.Map(document.getElementById("map"), {<font></font>
center: { lat: -34.397, lng: 150.644 },<font></font>
zoom: 8,<font></font>
renderingType: "VECTOR"<font></font>
});<font></font>

我们建议您在进行此更改前进行全面测试;矢量渲染会带来一些差异。最值得注意的是,代码内的 JSON 样式将不再起作用,但您可以改用。

展望未来

谷歌团队也在努力将下一代 3D 地图引入 Maps JavaScript API。这些地图也支持使用 HTML 进行开发。您只需两行代码即可开始使用:

&lt;script async src="https://maps.googleapis.com/maps/api/js?libraries=maps3d&amp;key=YOUR_KEY&amp;v=beta&amp;loading=async"&gt;&lt;/script&gt;<font></font>
&lt;gmp-map-3d mode="hybrid"&gt;&lt;/gmp-map-3d&gt;<font></font>

注意:3D 地图目前处于发布阶段。

地球的景色,由Map3DElement
【声明】该内容为作者个人观点,大数跨境仅提供信息存储空间服务,不代表大数跨境观点或立场。版权归原作者所有,未经允许不得转载。如发现本站文章存在版权问题,请联系:contact@10100.com
Cloud Ace 云一
Cloud Ace 是谷歌云菁英合作伙伴,拥有500多名工程师,多次获得 Google Cloud 年度合作伙伴奖,专注于提供谷歌云及相关服务,提供从云安装设计到运维的一站式支持。其它业务:谷歌地图、谷歌Workspace、谷歌广告、谷歌云培训、谷歌Voice。(电话:0755-26410916)
内容 25
粉丝 8
认证用户
Cloud Ace 云一 深圳云一信息技术开发有限公司 Cloud Ace 是谷歌云菁英合作伙伴,拥有500多名工程师,多次获得 Google Cloud 年度合作伙伴奖,专注于提供谷歌云及相关服务,提供从云安装设计到运维的一站式支持。其它业务:谷歌地图、谷歌Workspace、谷歌广告、谷歌云培训、谷歌Voice。(电话:0755-26410916)
总阅读10.2k
粉丝8
内容25
友情连接: telegram群| telegram下载安装包ios| 快连vpn登入| wps官网2019| WPS Office 破解版下载| gmail注册机| 手机telegram怎么设置中文| gmail邮箱下载windows| telegram虚拟号码购买| telegram账号突然没了| wps office 中文免費版| 快连vpn下载教程| telegram账号自助下单| 快连vpn安卓破解版| 快连vpn 电脑版| telegram安卓下载app| Telegram Web(电报中文网页版)| gmail注册免手机验证办法2025| 谷歌邮箱购买| telegram電腦版汉化| gmail注册免手机验证办法2025| 谷歌邮箱购买| telegram网页版收不到短信| wps下载 mac| telegram网页版登录| 快连vpn pc下载| telegram账号| textnow 注册telegram| telegram apk for android| 快连vpn pc破解版| 快连vpn破解版电脑| telegram中文设置2025| 谷歌邮箱gmail| wps office app| telegram网页版中文| telegram账号被封禁| telegram群组搜索网站| 纸飞机中文版注册| wps下载2019| Microsoft Office下载地址合集| WPS Office TW-WPS Office TW 简体中文-官方网站 |