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.mzph.cn/news/717807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

案例介绍:汽车售后服务网络构建与信息抽取技术应用(开源)

一、引言 在当今竞争激烈的汽车行业中&#xff0c;售后服务的质量已成为品牌成功的关键因素之一。作为一位经验丰富的项目经理&#xff0c;我曾参与构建一个全面的汽车售后服务网络&#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;或者也可以基于主…

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) 某宝上买…

Flink:Temporal Table Function(时态表函数)和 Temporal Join

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

设计模式(十五)状态模式

请直接看原文:设计模式系列 ------------------------------------------------------------------------------------------------------------------------------- 前言 建议在阅读本文前先阅读设计模式&#xff08;十一&#xff09;策略模式这篇文章&#xff0c;虽说状态…

【MATLAB】MVMD_ MFE_SVM_LSTM 神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 MVMD_MFE_SVM_LSTM神经网络时序预测算法结合了多变量多尺度分解&#xff08;MVMD&#xff09;、多尺度特征提取&#xff08;MFE&#xff09;、支持向量机&#xff08;SVM&#xff09;和长…

小米消息队列的选型与实践

之前写了一篇关于消息队列的文章&#xff1a;《消息队列介绍与对比》&#xff0c;本文主要介绍消息队列在实际工作中的使用情况&#xff08;截止到2023年&#xff0c;因为我2023年离职了&#xff0c;后续的情况不了解了&#xff0c;哈哈&#xff09;。 市面上的多种消息队列都有…

node问题: command not found: nodemon

如何安装并使用 nodemon npm i -g nodemon 问题与解决方案&#xff1a; 问题&#xff1a;zsh: command not found: nodemon 解决方案&#xff1a; 在你的 package.json 中加入&#xff1a; "scripts": {"auto": "npx nodemon server.js" }…

单例模式及应用场景

如果希望自己的代码更优雅、可维护性更高以及更简洁&#xff0c;往往离不开设计模式这一解决方案。 在JS设计模式中&#xff0c;最核心的思想&#xff1a;封装变化&#xff08;将变与不变分离&#xff0c;确保变化的部分灵活&#xff0c;不变的部分稳定&#xff09;。 那么来…

[嵌入式系统-36]:龙芯1B 开发学习套件 -5- PMON常见命令

目录 0. 开机时按c键进入pmon模式 &#xff08;自启动模式时&#xff09; 1、帮助命令 h 2、显示设备信息 devls 3.重启&#xff1a;reboot 4、设置环境变量 set/unset 5.查询环境变量&#xff1a;env 6.网络设置相关命令&#xff1a; ①设置IP&#xff1a;ifconfig&am…

Linux 基础IO(1)内存文件

文章目录 铺垫文件的系统调用接口文件描述符缓冲区 铺垫 文件文件内容 文件属性访问文件之前&#xff0c;都要先打开文件&#xff0c;而要访问&#xff0c;修改&#xff0c;编辑文件&#xff0c;文件就必须加载到内存中程序运行起来变成进程&#xff0c;被CPU调度&#xff0c;…

详解Win 7重置电脑操作步骤

文章目录 介绍Win 7 重置系统的方法&#xff1a;1.按下键盘上的Windows键和R键&#xff0c;打开运行窗口&#xff0c;输入sysprep 点击回车确定。2.之后就会出现如下界面&#xff0c;在这个新打开的窗口中双击 sysprep 程序3.选择【进入系统全新体验&#xff08;00BE) 】&#…

基于SpringBoot的在线拍卖系统(附项目源码+论文)

摘要 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单管理、留言板管理、系统管理&#xff0c;用户&#xff1b;首页、个人中心、历史竞拍管理、竞拍订单管理、留言板管理&#xff0…

STM32学习和实践笔记(1): 装好了的keil μVision 5

2019年3月在淘宝上买了这块STM32的开发板&#xff0c;学了一段时间后就丢下了&#xff0c;今天重新捡起来&#xff0c;决定好好学习、天天向上。 对照教程&#xff0c;今天先把keil5装上了。 装的过程有以下几点值得记录下&#xff1a; 1&#xff09;用注册机时&#xff0c;…

【应用多元统计分析】--多元数据的直观表示(R语言作图)

例1.2 为了研究全国31个省、市、自治区2018年城镇居民生活消费的分布规律&#xff0c;根据调查资料做区域消费类型划分。 指标&#xff1a; 食品x1&#xff1a;人均食品支出(元/人) 衣着x2&#xff1a;人均衣着商品支出(元/人) 居住x3&#xff1a;人均居住支出(元/人) 生活x4…

欧拉回路(Eulerian Path)

1.定义 如果图 G G G(有向图或者无向图)中所有边一次仅且一次行遍所有顶点的通路称作欧拉通路。 如果图 G G G中所有边一次仅且一次行遍所有顶点的回路称作欧拉回路。 具有欧拉回路的图成为欧拉图(简称 E E E图)。具有欧拉通路但不具有欧拉回路的图成为半欧拉图。 顶点可以经…

SpringMVC--03--前端传数组给后台

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 案例1乘客个人信息方法1&#xff1a;表单提交&#xff0c;以字段数组接收方法2&#xff1a;表单提交&#xff0c;以BeanListModel接收方法3&#xff1a;将Json对象序…