当前位置：首页 > ds >正文

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

ds 2025/5/18 6:48:08

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

联系我们 - Cloud AceCloud Ace 为谷歌云代理商，也是谷歌地图的经销商，Cloud Ace 拥有200多名工程师，提供谷歌云和谷歌地图技术支持和服务，解决客户对于谷歌云不熟悉的问题，协助解决技术难题，搭建服务架构。Cloud Ace 还可为客户提供发票和更低的价格。https://cloud-ace.cn/contact/

HTML 地图

谷歌宣布推出首套基于 HTML 的 API，它们由基于标准的Web 组件提供支持。现在，您只需几行代码（包括在 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>style="height: 400px"&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-mapcenter="37.4220656,-122.0840897"zoom="10"map-id="DEMO_MAP_ID"style="height: 400px"><gmp-advanced-markerposition="37.4220656,-122.0840897"title="Mountain View, CA"></gmp-advanced-marker>
</gmp-map>

欲了解更多信息，请参阅使用 HTML 添加带标记的 Google 地图指南和使用 HTML 添加带事件的地图代码示例。您还可以在我们的参考文档中查看完整的MapElement API 。

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

注意：请确保<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" style="height: 400px"&gt;&lt;/gmp-map-3d&gt;<font></font>

注意：3D 地图目前处于预览发布阶段。