Google 地图 API 教程--干货（1/2）

最新推荐文章于 2024-04-15 06:04:44 发布
最新推荐文章于 2024-04-15 06:04:44 发布
阅读量1.7k 收藏 19
点赞数 33
分类专栏： VIP文章干货 文章标签： github 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHADOW_xhx/article/details/136429318
版权

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
最低0.47元/天 解锁文章
摆烂的程序员阿轩.
关注
  • 33
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Google map API：查询地理位置和经纬度信息示例
简言
12-25 1万+
这两天工作需要调用到Google API，所以查询官方文档了解了一下，发现很方便。 注册Google Key 1、首先需要注册一个Google Cloud 账号。 2、创建一个项目。 具体步骤不记得了，之后再补，之前碰巧有注册过账号，就可以直接用。项目任意命名就可以。 查看官方地图API文档 Google全部API的地址：https://cloud.google.com/ma...
uniapp：谷歌地图，实现地图展示，搜索功能，H5导航
sunluyi的博客
10-26 1710
uniapp实现谷歌地图，地图展示及搜索
Android : Google Map API 调用
fh_luchenxi的博客
06-12 1311
最近因公司的一些特殊原因，接手一个安卓的项目，需求是将原有的app中调用百度地图的部分替换为谷歌地图（要将app拿到国外用），本着给钱的是老大的原则，硬着头皮上了只能！ 前提 安卓开发环境 科学上网环境 申请Google账号 在Google Cloud Platform申请到API KEY 效果图 将几个点连接起来，并设置起点与终点。 AndroidManifest.xml <meta-data android:name="com.google.android.geo
Google Maps API编程资源大全，2024年最新997页手淘Golang面试真题解析火爆全网
最新发布
2401_84253037的博客
04-15 451
的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！Google Earth KML中文说明（基于Google Earth客户端版本3.0 的KML 版本2.0）（主要是Google官方的文档说明，如果觉得中文翻译的有问题，也可以看看这些原始内容。另外一个版本的Google Maps API 2中文文档。Google Maps API 第1版中文文档。Google Maps API 英文文档。Google KML 的官方文档。
Google地图开发总结
weixin_33700350的博客
08-21 1316
我们经常使用地图查位置、看公交、看街景，同时地图还开放第三方的API给开发者。利用这些API进行地图的个性化的展示和控制，例如北京被水淹了，开发一个网页显示北京被淹的地图，地图上面标志被水淹的位置、严重程度，或者我是交警，想要在地图上标志发生车祸、被交通管制的路段，甚至是利用地图的街景，控制街景的位置变化做一个tour show动画。因为地图本身就是一个比较好玩的东西，再加上一些个性化的控制会...
地图导航 Google Maps API 的基本示例
qq_50756390的博客
04-01 455
但是，Vue.js 本身并不包含地图导航的功能，所以我们需要使用第三方库，比如 Google Maps API，或者高德地图 API。在上面的代码中，我们首先在 Vue.js 组件的 `data` 属性中定义了一些变量，用于存储地图、标记、路线服务等对象。在 `initMap` 方法中，我们创建了一个新的 Google 地图，并将它设置到 HTML 元素 `#map` 中。接下来，我们定义了起点和终点的位置。4. 在可能的情况下，使用第三方库和 API 来处理复杂的任务，比如地图和路线计算。
图解GPT-2，满满干货完整版
03-15
多图详细解释当今最为强大的人工智能 GPT-2(截至 2019 年 8 月 12 日)。 今年，我们看到了机器学习在许多场景的广泛应用。OpenAI GPT-2(https://openai.com/blog/better-language-models/)表现出了令人印象深刻的...
行业资料-建筑装置-干货箱运纸托盘.zip
09-04
【标题】"行业资料-建筑装置-干货箱运纸托盘.zip" 提供的资源主要集中在建筑装置领域，特别是关于干货箱运载纸托盘的使用和管理。这个压缩包包含了一个名为“干货箱运纸托盘.pdf”的文件，我们可以预判这份PDF文档将...
如何自学-Python(干货合集).docx
06-13
如何自学-Python(干货合集) 如何自学-Python(干货合集)全文共18页，当前为第1页。如何自学-Python(干货合集)全文共18页，当前为第1页。如何自学Python（干货合集） 如何自学-Python(干货合集)全文共18页，当前为第1...
Dcat-admin自定义页面干货
08-16
接下来，我们需要为自定义页面创建API接口。接口通常位于`app/Http/Controllers/api`目录下，负责处理与前端交互的数据。例如，你可以创建一个`CustomPageApi`类，提供获取或更新页面数据的接口。使用Laravel的`...
Google Maps API V3学习（例子不断增加中）
05-28
NULL 博文链接：https://ethanwooblog.iteye.com/blog/726952
google maps api 地图开发大全源码
05-09
google maps api 地图开发大全的源码，大家一起来分享，里面的东西还是不错的，适合刚开始学的人
google map api
10-19
google map api详细介绍google map api详细介绍google map api详细介绍
googleMap_谷歌地图
10-27
googleMap__谷歌___地图_.ppt
Google地图API接口
04-25
Google地图API接口大全，提供最全面的goole地图ApI编码接口
PM相关材料-项目管理干货-甘特图模板
05-08
1. **启动阶段甘特图**：这个模板可能用于定义项目范围、确定关键干系人和初步时间表。 2. **规划阶段甘特图**：详细规划每个任务，设定里程碑和任务依赖关系，确保项目按计划进行。 3. **执行阶段甘特图**：实时...
玩转代码|Google Map api国内正常使用该如何配置
Jum的博客
11-04 4437
大家知道google map api调用国内已经访问不了，虽然网上有很多教程，什么替换ip啊，把maps.google.com改成maps.google.cn。现在结算是免费试用阶段，申请的话，只要有一张信用卡就可以，因为已经没有了中国地区的选项，所以地址选择香港。我用的是cloudflare，所以直接在上面新开两个子域名，maps.example.com，mapsapis.example.com。测试了一下，直接通过访问自己的子域名，就可以调用maps.googleapis.com的地图接口了。
google地图API被墙问题总结
热门推荐
ISaiSai的专栏
02-12 1万+
google地图分三个 1. google.cn的 http http://ditu.google.cn/maps/api/js 这个不会被墙，且加载的资源都是.cn 的，最好用，但是要求你的域名也是http的 如携程http http://hotels.ctrip.com/international/bangkok359 能够正常展示 但是无法使用google.maps.plac...
谷歌地图API怎么画图
03-29
谷歌地图API可以使用JavaScript和HTML来绘制地图和标记。以下是绘制地图和标记的示例代码： 1. 首先，要在HTML文件中添加以下代码来引用谷歌地图API： ``` <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ``` 2. 然后，在JavaScript文件中，可以使用以下代码来创建地图： ``` var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 37.7749, lng: -122.4194} }); ``` 这将在指定的HTML元素中创建一个地图，并将其缩放级别设置为8，中心点设置为旧金山。 3. 要添加标记，可以使用以下代码： ``` var marker = new google.maps.Marker({ position: {lat: 37.7749, lng: -122.4194}, map: map, title: 'San Francisco' }); ``` 这将在地图上创建一个标记，并将其位置设置为旧金山的坐标。 4. 还可以添加信息窗口来显示标记的详细信息。以下是一个示例代码： ``` var infowindow = new google.maps.InfoWindow({ content: '<h3>San Francisco</h3><p>Population: 884,363</p>' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` 这将创建一个信息窗口，并将其内容设置为旧金山的人口数量。当用户单击标记时，信息窗口将在地图上打开。 以上是使用谷歌地图API绘制地图和标记的基本步骤。您可以根据需要进行更改和扩展，以便实现您的具体需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值