Google 地圖 API 教程--干貨(1/2)

Google Maps API 教程

在本教程中我們將學習如何使用谷歌地圖API V3創建交互式地圖。

什么是 API?

API = 應用程序編程接口(Application programming interface)。

API(Application Programming Interface,應用編程接口)其實就是操作系統留給應用程序的一個調用接口,應用程序通過調用操作系統的 API 而使操作系統去執行應用程序的命令(動作)。

Google 地圖API Key


開始學習本教程前,你需要擁有一個免費的 Google 地圖 API key。


開始學習?

開始學習本教程前,你需要在Google上申請一個指定的API key。

通過以下步驟我們可以免費獲取 API key 。

訪問 https://code.google.com/apis/console/, 使用你的Google賬號登陸。

登陸后會出現如下界面:

Create project API

點擊 "Create Project" 按鈕。

在服務列表中找到 Google Maps API v3, 然后點擊 "off"(關閉) 讓其開啟該服務器

在下一個步驟中,選擇"I Agree..." 然后點擊 "Accept" 按鈕。 現在你在服務列表中應該就可以看到 Google Maps API v3 已經變為 "on"(開啟)狀態。

接著在左側菜單中點擊 "API Access" ,在右側欄中將看到以下提示 "Create an OAuth 2.0 client id..."。

點擊 "Create an OAuth 2.0 client id...",將彈出一個表單,表單需要你填入你的項目名稱,項目圖片或者logo,然后點擊 "Next" 按鈕。

然后,我們需要選擇應用類型 ("Web application" :網站應用), 然后填寫你的站點地址,之后點擊 "Create Client Id" 按鈕即可。

最后我們就可以得到我們需要的 API key,如下圖所示:

API key

Remark

注意: 保存你的API key! ( 在填寫的指定 URL 中開發所有的 Google 地圖應用你需要使用該API key)。

Google Maps 基礎


創建一個簡單的 Google 地圖

現在讓我們創建一個簡單的 Google 地圖。

以下是顯示了英國倫敦的 Google 地圖:

實例

<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script> <script> function initialize() { var mapProp

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/717807.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/717807.shtml
英文地址,請注明出處:http://en.pswp.cn/news/717807.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【d34】【Java】【力扣】27. 移除元素

題目 給你一個數組 nums 和一個值 val&#xff0c;你需要 原地 移除所有數值等于 val 的元素&#xff0c;并返回移除后數組的新長度。 不要使用額外的數組空間&#xff0c;你必須僅使用 O(1) 額外空間并 原地 修改輸入數組。 元素的順序可以改變。你不需要考慮數組中超出新長…

案例介紹:汽車售后服務網絡構建與信息抽取技術應用(開源)

一、引言 在當今競爭激烈的汽車行業中&#xff0c;售后服務的質量已成為品牌成功的關鍵因素之一。作為一位經驗豐富的項目經理&#xff0c;我曾參與構建一個全面的汽車售后服務網絡&#xff0c;旨在為客戶提供無縫的維修、保養和配件更換服務。這個項目的核心目標是通過高效的…

spring、springmvc、springboot框架的介紹

前言 我們已經學過Spring&#xff0c;SpringMVC&#xff0c;SpringBoot了&#xff0c;那這三者之間有沒有聯系或者區別呢&#xff1f; spring是一個一站式的輕量級java開發的框架&#xff0c;那我們剛開始使用spring的時候&#xff0c;是需要配置很多的配置文件以及繁瑣的過程…

狀態機實現雙擊、短按、長按等按鍵識別檢測算法

1、按鍵識別算法的作用 按鍵識別算法在不同的技術和應用背景下有不同的作用&#xff0c;但其核心目標都是準確、可靠地檢測和區分用戶通過物理或虛擬按鍵所執行的操作。按鍵識別算法在各類電子設備及系統中起到至關重要的作用&#xff0c;它確保了人機交互的有效性和準確性&…

Vue前端+快速入門【詳解】

目錄 1.Vue概述 2. 快速入門 3. Vue指令 4.表格信息案例 5. 生命周期 1.Vue概述 1.MVVM思想 原始HTMLCSSJavaScript開發存在的問題&#xff1a;操作麻煩&#xff0c;耦合性強 為了實現html標簽與數據的解耦&#xff0c;前端開發中提供了MVVM思想&#xff1a;即Model-Vi…

Mysql-主從架構篇(一主多從,半同步案例搭建)

主從架構 主從架構有什么用&#xff1f; 通過搭建MySQL主從集群&#xff0c;可以緩解MySQL的數據存儲以及訪問的壓力。 數據安全&#xff08;主備&#xff09;&#xff1a;給主服務增加一個數據備份。基于這個目的&#xff0c;可以搭建主從架構&#xff0c;或者也可以基于主…

GO語言學習筆記(與Java的比較學習)(九)

讀寫數據 讀取用戶的輸入 最簡單的辦法是使用 fmt 包提供的 Scan 和 Sscan 開頭的函數。 Scanln 掃描來自標準輸入的文本&#xff0c;將空格分隔的值依次存放到后續的參數內&#xff0c;直到碰到換行。Scanf 與其類似&#xff0c;除了 Scanf 的第一個參數用作格式字符串&…

大數據開發(Java面試真題-卷三)

大數據開發&#xff08;Java面試真題&#xff09; 1、簡要介紹以下JVM有幾種垃圾收集器&#xff1f;2、Java中Synchronized的底層原理是什么&#xff1f;3、Java String為什么是不可變的&#xff1f;為什么要設計成不可變&#xff1f;4、泛型&#xff1f;5、常用的反射方法&…

深入Java日志框架及其最佳實踐

概述 在Java應用開發中&#xff0c;日志框架是確保應用穩定性和可觀察性的關鍵組件。它幫助開發者記錄應用的行為、診斷問題&#xff0c;并監控系統的健康狀況。隨著Java生態系統的不斷發展&#xff0c;各種日志框架也應運而生&#xff0c;各有特點和優勢。本文將詳細探討幾個…

redis進階(一)

文章目錄 前言一、Redis中的對象的結構體如下&#xff1a;二、壓縮鏈表三、跳躍表 前言 Redis是一種key/value型數據庫&#xff0c;其中&#xff0c;每個key和value都是使用對象表示的。 一、Redis中的對象的結構體如下&#xff1a; /** Redis 對象*/ typedef struct redisO…

c# .net8 香橙派orangepi + hc-04藍牙 實例

這些使用c# .net8開發&#xff0c;硬件 香橙派 orangepi 3lts和 hc-04藍牙 使用場景&#xff1a;可以通過這個功能&#xff0c;手機連接orangepi進行wifi等參數配置 硬件&#xff1a; 1、帶USB口的linux開發板orangepi 2、USB 轉TTL 中轉接藍牙&#xff08;HC-04) 某寶上買…

Vue的響應式原理是如何實現的

Vue的響應式原理主要**基于JavaScript的Object.defineProperty方法實現**。具體如下&#xff1a; 1. 數據劫持&#xff08;Data Hijacking&#xff09; Vue在初始化時&#xff0c;會遍歷data對象中的所有屬性&#xff0c;并使用Object.defineProperty將這些屬性轉換為getter/s…

Flink:Temporal Table Function(時態表函數)和 Temporal Join

博主歷時三年精心創作的《大數據平臺架構與原型實現&#xff1a;數據中臺建設實戰》一書現已由知名IT圖書品牌電子工業出版社博文視點出版發行&#xff0c;點擊《重磅推薦&#xff1a;建大數據平臺太難了&#xff01;給我發個工程原型吧&#xff01;》了解圖書詳情&#xff0c;…

AR時間序列模型

AR時間序列模型&#xff08;AutoRegressive Time Series Model&#xff09;是一種用于分析和預測時間序列數據的統計模型。該模型假設未來的觀測值與過去的觀測值相關&#xff0c;且該相關性可以通過線性回歸來描述。 AR模型的基本思想是將當前時刻的觀測值表示為過去幾個時刻…

設計模式(十五)狀態模式

請直接看原文:設計模式系列 ------------------------------------------------------------------------------------------------------------------------------- 前言 建議在閱讀本文前先閱讀設計模式&#xff08;十一&#xff09;策略模式這篇文章&#xff0c;雖說狀態…

java.sqlrecoverableexception: io error: the network adapter could not establ

數據庫相關學習資料下載地址&#xff1a; 數據庫相關資料合集 Java SQLRecoverableException: IO Error: The Network Adapter Could Not Establish Connection 在進行Java開發中&#xff0c;經常會遇到與數據庫進行交互的情況。然而&#xff0c;有時候我們可能會遇到java.sq…

Redis過期刪除策略

1、定時刪除&#xff1a; 一旦鍵過期就立即從內存中刪除&#xff0c;節省內存空間&#xff0c;但刪除過程會占用大量CPU時間&#xff0c;可能影響服務器的響應時間和吞吐量。 2、惰性刪除&#xff1a; 并不會立即從內存中刪除過期鍵&#xff0c;而是在需要訪問時才會檢查是否…

【MATLAB】MVMD_ MFE_SVM_LSTM 神經網絡時序預測算法

有意向獲取代碼&#xff0c;請轉文末觀看代碼獲取方式~也可轉原文鏈接獲取~ 1 基本定義 MVMD_MFE_SVM_LSTM神經網絡時序預測算法結合了多變量多尺度分解&#xff08;MVMD&#xff09;、多尺度特征提取&#xff08;MFE&#xff09;、支持向量機&#xff08;SVM&#xff09;和長…

Python爬蟲之爬取并下載嗶哩嗶哩視頻

親自使用過&#xff0c;太好用了 # 導入requests模塊&#xff0c;模擬發送請求 import requests # 導入json import json # 導入re import re# 定義請求頭 headers {Accept: */*,Accept-Language: en-US,en;q0.5,User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6…

小米消息隊列的選型與實踐

之前寫了一篇關于消息隊列的文章&#xff1a;《消息隊列介紹與對比》&#xff0c;本文主要介紹消息隊列在實際工作中的使用情況&#xff08;截止到2023年&#xff0c;因為我2023年離職了&#xff0c;后續的情況不了解了&#xff0c;哈哈&#xff09;。 市面上的多種消息隊列都有…