在過去的一年里，谷歌對 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