当前位置: 首页 > news >正文

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

在过去的一年里,谷歌对 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 地图目前处于预览发布阶段。

地球的景色,由Map3DElement

相关文章:

  • SpringBoot常用注解详解
  • 码蹄集——圆包含
  • 芯片测试之X-ray测试
  • FC7300 GPT MCAL 配置引导
  • handsome主题美化及优化:10.1.0最新版 - 2
  • 分析主流编程语言中哪些为支持面向对象的语言
  • PHP 与 面向对象编程(OOP)
  • OM和SCADA的区别
  • Linux远程连接服务
  • Feign异步模式丢失上下文问题
  • 探索ISBN查询接口:为图书管理系统赋能
  • 三格电子上新了——IO-Link系列集线器
  • 1-10 目录树
  • 【控制波形如何COPY并无痛使用】
  • NocoBase 本周更新汇总:优化及缺陷修复
  • VSCode插件 —— 文心快码 BAIDU COMATE (免费!!)
  • 代码随想录第51天|岛屿数量(深搜)、岛屿数量(广搜)、岛屿的最大面积
  • windows编程中加载DLL的两种典型方式的比较
  • 内部检测实验室数字化转型新路径 质检LIMS系统如何实现合规、效率、资质三重突破?
  • 小结:JavaScript 模块化工具链
  • 《歌手》回归,人均技术流,00后整顿职场
  • 江西4人拟任县(市、区)委书记,其中一人为“80后”
  • 钕铁硼永磁材料龙头瞄准人形机器人,正海磁材:已向下游客户完成小批量供货
  • 刘强东坐镇京东一线:管理层培训1800人次,最注重用户体验
  • 商务部:长和集团出售港口交易各方不得规避审查
  • 前四个月社会融资规模增量累计为16.34万亿元,比上年同期多3.61万亿元