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,一经查实,立即删除!

相关文章

【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;。 市面上的多种消息队列都有…