2. 創建或選擇一個項目。

3. 點擊繼續,啟用 API 和任何相關服務。

4. 在憑據頁面上,獲取 API 密鑰(并設置 API 密鑰限制)。注意:如果您已有不受限的 API 密鑰或存在瀏覽器限制的密鑰,可以使用相應密鑰。

5. 如需防止配額盜用并保護 API 密鑰,請參閱使用 API 密鑰。

6. 啟用結算功能。如需了解詳情,請參閱用量和結算。

7. 獲得 API 密鑰后,點擊“YOUR_API_KEY”將密鑰添加到以下代碼段中。復制并粘貼引導程序腳本標記,以便在自己的網頁上使用。

<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

2. 創建 HTML、CSS 和 JS 網頁

下方代碼可創建一個基本的 HTML 網頁:

<html>
<head>
<title>Add a Map with Markers using HTML</title>

<!-- TODO: Add bootstrap script tag. -->
</head>
<body>
<!-- TODO: Add a map with markers. -->
</body>
</html>

若要加載地圖,您必須添加一個包含 Maps JavaScript API 引導加載程序的 script 標記,如以下代碼段所示(添加您自己的 API 密鑰):

<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=map,marker">

劇透提醒:嘗試 JSFiddle 上已完成的示例。

3. 添加地圖

若要將 Google 地圖添加到網頁中,請復制 HTML 元素 gmp-map 并將其粘貼到 HTML 網頁的 body 中:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

結果會得到如下地圖:

您剛剛創建的地圖以圣何塞都市區為中心。

4. 添加標記

若要向地圖添加標記,請使用 HTML 元素 gmp-advanced-marker。復制以下代碼段,然后粘貼您在上一步中添加的整個 gmp-map

<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>

以上代碼會添加兩個標記,并更改 gmp-map 上的 zoom 和 center 參數,以便更好地顯示這些標記。使用高級標記需要地圖 ID(可以使用 DEMO_MAP_ID)。

5. 提示和問題排查

6. 完整示例代碼

以下是最終的地圖,以及使用的完整示例代碼。

<html>
<head>
<title>Add a Map with Markers using HTML</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>

<!--
The defer attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>

7. 常見問題

問題1:如何找到谷歌地圖 API

冪簡集成是國內領先的API集成管理平臺,專注于為開發者提供全面、高效、易用的API集成解決方案。冪簡API平臺可以通過以下兩種方式找到所需API:通過關鍵詞搜索API(例如,輸入’谷歌地圖 API‘這類品類詞,更容易找到結果)、或者從API hub分類頁進入尋找。

問題2:Google 地圖平臺覆蓋哪些國家?

Google 地圖團隊不斷推出新的地圖數據,并擴大我們的國際覆蓋范圍。請查閱Google 地圖覆蓋范圍數據,了解最新的覆蓋范圍信息。您可以使用頁面頂部的過濾框過濾數據。請注意,如果與數據提供商的許可協議發生變化,覆蓋范圍數據可能會發生變化。

問題3:如何在移動設備上提供地圖應用程序?

要將地圖合并到 Android 應用程序,請使用 Maps SDK for Android。 要將地圖合并到本機 iOS 應用程序中,請使用 Maps SDK for iOS。 Maps JavaScript API是為滿足移動設備的需求而開發的,適用于針對桌面和包含具有完整 JavaScript 實現的 Web 瀏覽器的設備(例如 Apple iPhone)的瀏覽器應用程序。 對于針對不適合使用 Maps JavaScript API 的設備的應用,Maps Static API 可提供 GIF、JPG 和 PNG 格式的地圖圖像,包括標記和折線。請注意,在基于瀏覽器的應用之外使用 Maps Static API 需要將地圖圖像鏈接到 Google 地圖。

問題4:我可以從 Maps JavaScript API 打印地圖嗎?

不支持通過 Maps JavaScript API 進行打印。這是因為常用瀏覽器對打印的支持不一致。

問題5:谷歌地圖 API 的替代品有哪些?

提供地圖 API的服務商除了谷歌地圖api,還有其他替代服務商也提供類似api服務,例如:

騰訊地圖高德地圖汽車地圖-tomtom

更多競品可以在冪簡集成開放平臺中找到。

問題6:谷歌地圖 API 這個密鑰還適用于哪些api?

谷歌路線 API?谷歌地點庫?谷歌地理編碼服務

9.  總結

本文總結了獲取谷歌地圖api調用的詳細步驟,從獲取 API 密鑰到提示和問題排查,再到獲取完整示例代碼,為開發者提供了實用的指南。同時,還探討了在使用API過程中需要考慮的關鍵因素,如添加標記添加地圖類型及控件添加等,幫助開發者更有效地集成到應用中。

熱門推薦
一個賬號試用1000+ API
助力AI無縫鏈接物理世界 · 無需多次注冊
3000+提示詞助力AI大模型
和專業工程師共享工作效率翻倍的秘密
返回頂部
上一篇
如何獲取有道翻譯 API Key 密鑰(分步指南)
下一篇
如何使用Google自動完成API作為關鍵字研究工具
国内精品久久久久影院日本,日本中文字幕视频,99久久精品99999久久,又粗又大又黄又硬又爽毛片
天堂午夜影视日韩欧美一区二区| 国产精品私人影院| 欧美v亚洲v综合ⅴ国产v| 亚洲欧美激情小说另类| 91在线观看高清| 亚洲日本在线观看| 欧美亚洲图片小说| 久久国产麻豆精品| 91精品国产色综合久久久蜜香臀| 日韩在线一区二区三区| 亚洲一级二级三级在线免费观看| av色综合久久天堂av综合| 国产精品免费久久| 一本色道久久加勒比精品 | 免费欧美日韩国产三级电影| 欧美日韩精品系列| 久草这里只有精品视频| 中文字幕欧美激情| 一本色道久久综合亚洲91 | 国产欧美一区二区三区鸳鸯浴| 国产成人丝袜美腿| 亚洲永久精品国产| 欧美v国产在线一区二区三区| 成人午夜电影小说| 日韩精品每日更新| 国产精品三级电影| 欧美一区二区免费视频| 一本色道久久综合亚洲91| 久久精品国产一区二区三| 一区二区三区视频在线观看| 精品乱码亚洲一区二区不卡| 在线日韩一区二区| 波多野结衣一区二区三区| 麻豆成人久久精品二区三区小说| 国产精品久久福利| 日韩精品中文字幕一区二区三区| 一本久久a久久免费精品不卡| 紧缚奴在线一区二区三区| 亚洲福利视频导航| 亚洲激情欧美激情| 亚洲免费电影在线| 亚洲欧洲99久久| 中文字幕第一区| 久久久无码精品亚洲日韩按摩| 3atv在线一区二区三区| 欧洲在线/亚洲| 99久久精品免费看国产| 国产福利91精品一区二区三区| 日韩中文欧美在线| 五月开心婷婷久久| 午夜精品123| 日本成人在线网站| 日本不卡高清视频| 久久电影网站中文字幕| 精品一区二区三区日韩| 国产综合成人久久大片91| 久草中文综合在线| 国产精品一二三四区| 极品少妇xxxx精品少妇偷拍| 国内精品免费在线观看| 国产裸体歌舞团一区二区| 国产露脸91国语对白| 国产成人高清在线| 成人国产电影网| 91福利国产精品| 欧美人牲a欧美精品| 91精品国产色综合久久| 日韩女优制服丝袜电影| 2023国产精品视频| 国产精品电影一区二区| 一区二区三区四区视频精品免费| 亚洲一区二区不卡免费| 久久99国产精品免费| 99热精品一区二区| 欧美一级片在线| 国产精品国产三级国产aⅴ原创 | 激情综合网激情| 成人a区在线观看| 欧美日韩精品一区二区在线播放| 日韩欧美自拍偷拍| 18成人在线观看| 视频一区二区三区中文字幕| 国内精品伊人久久久久av一坑 | 亚洲第四色夜色| 国模娜娜一区二区三区| 97se亚洲国产综合在线| 欧美一级欧美三级在线观看| 国产精品每日更新在线播放网址| 亚洲福利电影网| 99精品久久99久久久久| 精品国产免费久久| 亚洲一区二区精品3399| 成+人+亚洲+综合天堂| 91精品国产色综合久久不卡蜜臀 | 麻豆传媒一区二区三区| 在线观看欧美黄色| 国产精品久久网站| 国产白丝精品91爽爽久久| 欧美剧情片在线观看| 亚洲美女视频在线观看| 成人国产精品免费观看动漫| 精品免费日韩av| 热久久一区二区| 欧美疯狂做受xxxx富婆| 亚洲精品自拍动漫在线| jiyouzz国产精品久久| 国产日韩欧美一区二区三区综合| 蜜臀久久99精品久久久久久9| 欧美唯美清纯偷拍| 亚洲国产精品天堂| 欧美人狂配大交3d怪物一区| 亚洲国产精品传媒在线观看| 国产亚洲一区字幕| 婷婷中文字幕综合| 亚洲精品视频免费观看| 91欧美一区二区| 亚洲色图欧美偷拍| 色综合夜色一区| 图片区日韩欧美亚洲| 色婷婷久久久久swag精品| 亚洲欧美一区二区在线观看| 白白色 亚洲乱淫| 亚洲另类色综合网站| 欧美综合在线视频| 日本少妇一区二区| 久久一区二区三区四区| 国产成人综合自拍| ㊣最新国产の精品bt伙计久久| 91蜜桃婷婷狠狠久久综合9色| 亚洲裸体xxx| 欧美一区二区三区视频在线观看| 久久激情综合网| 国产精品色呦呦| 欧美性色黄大片| 激情深爱一区二区| 国产精品日韩成人| 欧美人与性动xxxx| 成人久久视频在线观看| 亚洲一区二区3| 久久综合给合久久狠狠狠97色69| 成人免费精品视频| 亚洲一级二级在线| 国产日韩欧美在线一区| 在线免费不卡电影| 国产福利一区在线观看| 亚洲国产美国国产综合一区二区| 久久综合一区二区| 欧美日韩国产在线播放网站| 国产在线播放一区三区四| 亚洲综合色成人| 国产精品午夜在线观看| 日韩精品一区国产麻豆| 91黄色免费观看| 国产精品99久久久久久久vr| 亚洲一区影音先锋| 国产精品久久久久精k8 | 日韩vs国产vs欧美| 亚洲天堂av老司机| 国产欧美精品一区| 精品盗摄一区二区三区| 欧美高清视频不卡网| 在线视频欧美区| 91天堂素人约啪| 国产成a人亚洲| 精品中文字幕一区二区小辣椒| 亚洲一区视频在线观看视频| 中文字幕在线观看不卡| 国产拍揄自揄精品视频麻豆| 精品va天堂亚洲国产| 日韩你懂的电影在线观看| 欧美电影在哪看比较好| 欧美三级电影在线看| 欧美在线观看一区二区| 色综合色狠狠综合色| av中文字幕不卡| 91一区二区在线| 97se亚洲国产综合在线| 色呦呦日韩精品| 欧美日韩亚州综合| 欧美一区二区三区不卡| 337p粉嫩大胆噜噜噜噜噜91av| 日韩欧美国产电影| 日韩精品一区二区在线观看| 精品欧美一区二区三区精品久久 | 欧美性受xxxx黑人xyx| 在线亚洲精品福利网址导航| 一本一本大道香蕉久在线精品 | 欧美色图片你懂的| 欧美乱妇23p| 精品久久久久99| www亚洲一区| 国产精品国产馆在线真实露脸| 中文字幕一区二区三区在线观看| 国产精品对白交换视频| 亚洲福中文字幕伊人影院| 日本特黄久久久高潮| 国产成都精品91一区二区三| 欧美性大战久久久久久久蜜臀| 久久综合国产精品| 午夜视频在线观看一区|